Profile Card Using HTML & Tailwind (Tailwind Cards Codepen available)

Profile Card Using HTML & Tailwind (Tailwind Cards Codepen available)

Profile Card Using HTML & Tailwind
Profile Card Using HTML & Tailwind

 

Welcome to the Codewithrandom blog. In this blog, we learn how to create a Tailwind Profile Card on Codepen. We use HTML and Tailwind for Tailwind Profile Card Codepen.

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Tailwind Profile Card.

HTML & Tailwind Code For Tailwind Profile Card

Table of Contents

<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 and Tailwind code for the Tailwind Profile Card. Now, you can see output without Css, then we write Css Code for the Tailwind Profile Card Icon.

5+ HTML CSS Projects With Source Code

Output

CSS Code For Tailwind Profile Card

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.this is a link to the icon of the Tailwind Card.

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

Final Output Of Tailwind Profile Card

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

50+ HTML, CSS & JavaScript Projects With Source Code

We have completed our Tailwind Profile Card. Here is our updated output with Html, Tailwind Css, and Css. Hope you like the Tailwind Profile Card Codepen. you can see output project screenshots and codepen. See our other blogs and gain knowledge in front-end development.

Thank you!

This post teaches us to create a Tailwind Profile Card. 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
code by – Vishnu Darshan Sanku

Leave a Reply