Beautiful Team Section Design using Tailwind CSS
Back Tailwind - v3.0 2 years ago 329 31
HTML
<body class="p-10 bg-sky-500">
<h3 class="font-bold text-4xl py-20 text-center">Our Teams</h3>
<div class="flex flex-col sm:flex-row">
<div
class="sm:basis-1/2 md:basis-1/3 bg-white hover:bg-gray-100 transition cursor-pointer hover:-translate-y-6 mb-10">
<div class="text-center bg-teal-500 w-20 h-20 -mt-5 rounded-full m-auto flex justify-center">
<h3 class="text-white text-center font-serif font-medium text-4xl m-auto">01</h3>
</div>
<div class="item-content py-8 px-6">
<p class="text-gray-500 text-center p-4">
Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
manor
smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs
passed
but
wishes. You day real less till dear read less till dear rea.
</p>
<p class="pt-8">
<img src="https://i.ibb.co/QCP76ZW/profile.jpg" alt="" class="m-auto w-20 h-20 rounded-full">
</p>
<h3 class="mt-3 text-center font-medium text-black text-3xl font-serif">
Josh Larson
</h3>
<h4 class="text-center font-thin text-slate-500 mt-3">CEO and Founder</h4>
</div>
</div>
<div
class="sm:basis-1/2 md:basis-1/3 bg-gray-200 hover:bg-gray-200 transition cursor-pointer hover:-translate-y-6 mb-10">
<div class="text-center bg-teal-500 w-20 h-20 -mt-5 rounded-full m-auto flex justify-center">
<h3 class="text-white text-center font-serif font-medium text-4xl m-auto">02</h3>
</div>
<div class="item-content py-8 px-6">
<p class="text-gray-500 text-center p-4">
Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
manor
smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs
passed
but
wishes. You day real less till dear read less till dear rea.
</p>
<p class="pt-8">
<img src="https://i.ibb.co/QCP76ZW/profile.jpg" alt="" class="m-auto w-20 h-20 rounded-full">
</p>
<h3 class="mt-3 text-center font-medium text-black text-3xl font-serif">
Allen Barry
</h3>
<h4 class="text-center font-thin text-slate-500 mt-3">CEO and Founder</h4>
</div>
</div>
<div
class="sm:basis-1/2 md:basis-1/3 bg-white hover:bg-gray-100 hover:text-black transition cursor-pointer hover:-translate-y-6 mb-10">
<div class="text-center bg-teal-500 w-20 h-20 -mt-5 rounded-full m-auto flex justify-center">
<h3 class="text-white text-center font-serif font-medium text-4xl m-auto">03</h3>
</div>
<div class="item-content py-8 px-6">
<p class="text-gray-500 text-center p-4">
Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
manor
smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs
passed
but
wishes. You day real less till dear read less till dear rea.
</p>
<p class="pt-8">
<img src="https://i.ibb.co/QCP76ZW/profile.jpg" alt="" class="m-auto w-20 h-20 rounded-full">
</p>
<h3 class="mt-3 text-center font-medium text-black text-3xl font-serif">
Jhon Doe
</h3>
<h4 class="text-center font-thin text-slate-500 mt-3">CEO and Founder</h4>
</div>
</div>
</div>
</body>