turn my html+css+php code into a PDF as an email attachment

I've "designed" a business card template using HTML and CSS:

This is my HTML code (with some php):

<div class="businessCard"> <div class="logo img"><img src="<?=dir_images?>logos/<?=$company['logo']?>"></div> <div class="address"> <span class="office"><?=$company_name?></span> <?=nl2br($employee['office_addr1']??'')?><br> <?=nl2br($employee['office_addr2']??'')?><br> <?=$company['website']?> </div> <div class="name"><b><?=$employee['name']?></b></div> <div class="title"><?=nl2br($employee['title']??'')?></div><br> <div class="contact"> <span class="contact-key">Office: </span><?=$office_tel_str?><br> <span class="contact-key">Mobile: </span><?=$mobile_tel_str?><br> <span class="contact-key">Email: </span><?=$employee['email']?> </div> </div>

And here's my CSS:

[class^="businessCard"] { @font-face { font-family: 'Montserrat-Light'; /* Choose any name you like */ src: url('/assets/fonts/Montserrat-Light.otf') format('opentype'); /* Adjust the path as needed */ font-weight:normal; font-style:normal; } @font-face { font-family: 'Montserrat-Regular'; /* Choose any name you like */ src: url('/assets/fonts/Montserrat-Regular.otf') format('opentype'); /* Adjust the path as needed */ font-weight:normal; font-style:normal; } @font-face { font-family: 'Montserrat-SemiBold'; /* Choose any name you like */ src: url('/assets/fonts/Montserrat-SemiBold.otf') format('opentype'); /* Adjust the path as needed */ font-weight:normal; font-style:normal; } @font-face { font-family: 'RobotoSerif-Medium'; /* Choose any name you like */ src: url('/assets/fonts/RobotoSerif-Medium.ttf') format('opentype'); /* Adjust the path as needed */ font-weight:normal; font-style:normal; } position:relative; box-sizing:border-box; width:8.5cm; height:5.5cm; overflow:visible; page-break-inside:avoid; transform-origin:left center; transform:scale(1); background-color:#ffff; border:1px solid #000; .border-radius(5mm,0,5mm,0); font-kerning:none; .logo { position:absolute; top:0.635cm; left:0.635cm; max-width:2.8094cm; } .address { position:absolute; top:0.68cm; left:5.1cm; font-family: 'Montserrat-Light'; font-size: 7pt; line-height: 8.4pt; } .office { display: block; font-family: 'Montserrat-SemiBold'; font-size: 7.5pt; line-height: 9pt; } .name { position:absolute; top:2.9cm; left:0.65cm; font-family: 'RobotoSerif-Medium'; font-size: 8.5pt; line-height: 10.2pt; } .title { position: absolute; top:3.3cm; left:0.65cm; font-family: 'Montserrat-Light'; font-size: 7.5pt; line-height: 9pt;} .contact { position: absolute; top:4.1cm; left:0.65cm; font-family: 'Montserrat-Light'; font-size: 7.5pt; line-height: 9pt; } span.contact-key { display: inline-block; width:1.1cm; font-family: 'Montserrat-Regular'; font-size: 7pt; line-height: 8.4pt; } .tel { i { font-style: normal; display:inline-block; width: 0.67em; text-align: center; } } }

This code turns into this (without the background):

What I need to do now, is to turn this into a PDF that can be set as an attachment when using phpMailer.

I would like to send this, as a generated PDF, to myself so I can download it, and then send this PDF directly to my printer.

The program I use for printing accepting PDFs only.

How do I turn this code into PDF?

We have multiple business-card templates coded the same way.