Tailwind Profile Card Codepen | Modern Tailwind Css Card







Tailwind Profile Card Codepen | Modern Tailwind Css Card

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Tailwind Profile Card Codepen. We use HTML & Tailwind for Tailwind Profile Card Codepen. Hope you enjoy our blog so let’s start with a basic HTML structure for the Tailwind Profile Card Codepen. 

HTML code

   <div class="min-h-screen grid place-items-center bg-indigo-400 font-mono">  
<div class="bg-white h-80 w-64 rounded-md">
<div class="flex justify-center items-center leading-none">
<img
src="https://images.unsplash.com/photo-1585554414787-09b821c321c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
alt="pic"
class="h-40 w-56 rounded-md shadow-2xl mt-6 transform -translate-y-10 hover:-translate-y-4 transition duration-700"
/>
</div>
<div class="p-3">
<p class="block mb-1 font-extralight">Modelling</p>
<p class="text-xs tracking-tighter text-gray-600">
When it is your time, it’s your time. There is no point in worrying
about what you can’t control.
</p>
</div>
<div class="flex justify-between items-center p-2">
<img
src="https://i.pravatar.cc/150?img=58"
alt=""
class="rounded-full h-7"
/>
<div class="flex">
<i class="material-icons" style="color: #522cad">favorite_border</i>
<span class="text-sm ml-1">100</span>
<i class="material-icons ml-1" style="color: #522cad">message</i>
<span class="text-sm ml-1">60</span>
</div>
</div>
</div>
</div>

There is all HTML&Tailwind code for the Tailwind Profile Card Codepen. Now, you can see output without CSS, then we write CSS for the Tailwind Profile Card Codepen.

Output

Tailwind Profile Card Codepen | Modern Tailwind Css Card

CSS code

 https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css  

this is the CDN link of tailwind css so don’t forget to add this, if you did not add this CDN link you get a blank html preview  

 @import 'https://fonts.googleapis.com/icon?family=Material+Icons';  
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

this is a link to the icon

Tailwind Profile Card Codepen | Modern Tailwind Css CardTailwind Profile Card Codepen | Modern Tailwind Css Card

We have completed our CSS section,  Here is our updated output with CSSHope you like the Tailwind Profile Card Codepen, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a Tailwind Profile Card Codepen using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..



Share on:

Leave a Comment