Modern I D Card - Copy this Html, Bootstrap Component to your project
<!DOCTYPE-html>-<html>-<head>-<style>-.card-container-{-display:-flex;-gap:-20px;-padding:-20px;-font-family:-Arial,-sans-serif;-}-.id-card-{-width:-350px;-height:-550px;-background:-white;-border-radius:-15px;-box-shadow:-0-4px-15px-rgba(0,0,0,0.1);-overflow:-hidden;-position:-relative;-}-.purple-header-{-background:-linear-gradient(135deg,-#6b22c9-0%,-#8244df-100%);-height:-180px;-position:-relative;-}-.wave-bottom-{-position:-absolute;-bottom:--1px;-left:-0;-width:-100%;-height:-60px;-background:-white;-clip-path:-polygon(0-100%,-100%-100%,-100%-0,-0-100%);-}-.company-name-{-color:-white;-text-align:-center;-padding:-20px;-font-size:-24px;-font-weight:-bold;-}-.tagline-{-color:-rgba(255,255,255,0.8);-text-align:-center;-font-size:-14px;-margin-top:--15px;-}-.photo-container-{-width:-130px;-height:-130px;-border-radius:-50%;-border:-3px-solid-#6b22c9;-margin:--40px-auto-20px;-overflow:-hidden;-background:-#f0f0f0;-position:-relative;-z-index:-2;-}-.photo-container-img-{-width:-100%;-height:-100%;-object-fit:-cover;-}-.card-content-{-padding:-0-30px;-text-align:-center;-}-.name-{-font-size:-24px;-font-weight:-bold;-margin-bottom:-5px;-}-.position-{-color:-#666;-margin-bottom:-25px;-}-.info-grid-{-display:-grid;-grid-template-columns:-auto-1fr;-gap:-10px;-text-align:-left;-margin-bottom:-25px;-}-.info-label-{-color:-#666;-font-weight:-bold;-}-.barcode-{-text-align:-center;-margin-top:-20px;-}-.barcode-img-{-max-width:-200px;-}-/*-Back-Card-Styles-*/-.back-card-{-width:-350px;-height:-550px;-background:-white;-border-radius:-15px;-box-shadow:-0-4px-15px-rgba(0,0,0,0.1);-overflow:-hidden;-position:-relative;-}-.terms-content-{-padding:-30px;-}-.terms-title-{-font-size:-20px;-font-weight:-bold;-margin-bottom:-20px;-}-.terms-list-{-list-style-type:-disc;-padding-left:-20px;-margin-bottom:-30px;-}-.terms-list-li-{-margin-bottom:-15px;-color:-#666;-font-size:-14px;-}-.dates-grid-{-display:-grid;-grid-template-columns:-auto-1fr;-gap:-10px;-margin-bottom:-30px;-}-.purple-footer-{-background:-linear-gradient(135deg,-#6b22c9-0%,-#8244df-100%);-height:-150px;-position:-absolute;-bottom:-0;-width:-100%;-clip-path:-polygon(0-40%,-100%-0,-100%-100%,-0-100%);-color:-white;-display:-flex;-flex-direction:-column;-justify-content:-flex-end;-padding:-20px;-text-align:-center;-}-.signature-line-{-border-top:-1px-solid-white;-width:-200px;-margin:-10px-auto;-padding-top:-5px;-font-size:-14px;-}-</style>-</head>-<body>-<div-class="card-container">-<!---Front-Card--->-<div-class="id-card">-<div-class="purple-header">-<div-class="company-name">COMPANY-NAME</div>-<div-class="tagline">TAGLINE-GOES-HERE</div>-<div-class="wave-bottom"></div>-</div>-<div-class="photo-container">-<img-src="/api/placeholder/130/130"-alt="ID-Photo">-</div>-<div-class="card-content">-<div-class="name">YOUR-NAME</div>-<div-class="position">JOB-POSITION</div>-<div-class="info-grid">-<div-class="info-label">ID-NO:</div>-<div>000-000-000-221</div>-<div-class="info-label">EMAIL:</div>-<div>your.mail@here</div>-<div-class="info-label">PHONE:</div>-<div>+00-091-231-589</div>-</div>-<div-class="barcode">-<img-src="/api/placeholder/200/50"-alt="Barcode">-</div>-</div>-</div>-<!---Back-Card--->-<div-class="back-card">-<div-class="terms-content">-<div-class="terms-title">Terms-&-Condition</div>-<ul-class="terms-list">-<li>Lorem-ipsum-dolor-sit-amet,-consectetur-adipiscing-elit,-sed-do-eiusmod-tempor-incididunt-ut-labore-et-dolore-magna-aliqua.</li>-<li>Lorem-ipsum-dolor-sit-amet,-consectetur-adipiscing-elit,-sed-do-eiusmod-tempor-incididunt-ut-labore-et-dolore-magna-aliqua.</li>-</ul>-<div-class="dates-grid">-<div-class="info-label">JOIN-DATE:</div>-<div>02-01-2023</div>-<div-class="info-label">EXPIRE-DATE:</div>-<div>31-12-2025</div>-</div>-</div>-<div-class="purple-footer">-<div-class="signature-line">Your-Signature</div>-<div>Your-Sincerely</div>-<div-class="company-name">COMPANY-NAME</div>-<div-class="tagline">TAGLINE-GOES-HERE</div>-</div>-</div>-</div>-</body>-</html>-/-This-is-not-looking-good.-Please-write-such-code-which-looks-attractive.
