Tailwind CSS Profile Card

Based on: https://twitter.com/steveschoger/status/981606881255976961

by Jed Lynch

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<div>
  <div class="w-full py-8">
    <div class="flex flex-wrap flex-auto">
      <div class="w-1/3 py-4">
         <div class="mx-auto bg-red rounded-full h-24 w-24">
            <div class="flex items-center h-full">
                 <div class="mx-auto">Book Now!</div>
            </div>
         </div>
       </div>
       <div class="w-1/3 py-4">
         <div class="mx-auto bg-red rounded-full h-24 w-24">
            <div class="flex items-center h-full">
                 <div class="mx-auto">Packages</div>
            </div>
         </div>
       </div>
       <div class="w-1/3 py-4">
         <div class="mx-auto bg-red rounded-full h-24 w-24">
            <div class="flex items-center h-full">
                 <div class="mx-auto">Weddings</div>
            </div>
         </div>
       </div>
       <div class="w-1/3 py-4">
         <div class="mx-auto bg-red rounded-full h-24 w-24">
            <div class="flex items-center h-full">
                 <div class="mx-auto">Attractions</div>
            </div>
         </div>
        </div>
        <div class="w-1/3 py-4">
           <div class="mx-auto bg-red rounded-full h-24 w-24">
              <div class="flex items-center h-full">
                   <div class="mx-auto">History</div>
              </div>
           </div>
        </div>
   </div>
  
  </div>


	<h2>Weddings</h2>
	<p>
		Imagine the Wedding of your dreams filled with all the Special Touches. Imagine being surrounded by loving family and friends in a private setting among the rolling hills and vineyards of the Cayuga and Seneca Finger Lakes Wine Trail in upstate New York.
	</p>
	<p>
		Intimate Weddings (50 guests max) are our Specialty. Its all here but the dress & the groom. Flowers, ceremony, Justice O' Peace, witnesses, reception, tent, table, linens, chairs, rental props, china, flatware, stemware, food, cake, decorations, guest rooms, bridal...

CSS

.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.h-40 { height: 10rem; }
.-mt-16 { margin-top: -4rem; }
.-mt-24 { margin-top: -6rem; }