Introduction
Today we are going to make useful hovering message card with the help of HTML and Tailwind. This is very useful card as you can add this card in your website to store some information, product detail, about you, etc. as whatever you want you can write in this card. Their code will not be very complicated if you are following us step by step carefully. Most important thing is this card will be fully responsive.
Now lets start making this hover card with the help of html and tailwind. This will be easy as every developer can understand no matter he/she is fresher or an experience guy.
HTML
First we will make the structure of card with the help of HTML. In this card first we will make the logo of chat in img. tag and then we will add some text in p tag. At the end we will also make a button with a arrow sign in which a link will be given to read the further details of thing given in the card to know more about this card product.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="/dist/output.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
<title>layakCoder</title>
</head>
<body>
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-black py-6 sm:py-12">
<div
class="group relative cursor-pointer overflow-hidden bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl sm:mx-auto sm:max-w-sm sm:rounded-lg sm:px-10">
<span class="absolute top-10 z-0 h-20 w-20 rounded-full bg-sky-500 transition-all duration-300 group-hover:scale-[10]"></span>
<div class="relative z-10 mx-auto max-w-md">
<span class="grid h-20 w-20 place-items-center rounded-full bg-sky-500 transition-all duration-300 group-hover:bg-sky-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-10 w-10 text-white transition-all">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
</svg>
</span>
<div
class="space-y-6 pt-5 text-base leading-7 text-gray-600 transition-all duration-300 group-hover:text-white/90">
<p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share
online.</p>
</div>
<div class="pt-5 text-base font-semibold leading-7">
<p>
<a href="#" class="text-sky-500 transition-all duration-300 group-hover:text-white">Read the docs
→
</a>
</p>
</div>
</div>
</div>
</div>
<!-- https://play.tailwindcss.com/eCfibrSI2X -->
</body>
</html>Tailwind(CSS)
After making the structure of card we will now make it designing by giving styling with the help of tailwind(a framework of CSS).We uses tailwind instead of CSS because it is quite easy to make responsive website by tailwind. In this first we will adjust the position and size of card. Now we will give styling to the logo like giving it border, color and background and we will also give the color to the button given in the end of card. At the end we will apply hovering effect, when the user will hover the card then the 90% of card background will change with some transition effect. After making the card we will now make it response to other device. In tailwind pages are auto-responsive for mobile
@tailwind base; @tailwind components; @tailwind utilities;
Now Finally we made the responsive hovering card with the help of HTML and Tailwind CSS by following the code step by step. I hope You understood the code perfectly. If you want the source code then click on the button given below to download.
For more explanation click on the below link to watch video.
Press the download button to download the source code
