Card Post Project Using Tailwind UI
This is a tailwind css component for card post project. If you hover card, a description text will appear about the project created.
card
Loading component...
72 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'IBM Plex Sans', sans-serif;
}
</style>
<!-- inspired design by https://replit.com/?ref=pixelfika -->
<section class="bg-[#0E1525] h-screen">
<div
class="flex flex-col items-center justify-center w-full gap-4 px-2 py-12 mx-auto flex-s md:flex-row sm:px-8 xl:px-24">
<div class="w-full p-4 bg-[#1c2333] border border-gray-900 rounded-xl md:w-1/3 group">
<h1 class="text-xl font-semibold text-white text-start">SSSPICY!</h1>
<img class="object-cover w-full mt-8 rounded-xl"
src="https://replit.com/public/images/featured-repls/torcado/cover.png" alt="">
<div class="flex flex-col mt-8 space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 mr-2"
src="https://www.gravatar.com/avatar/f339d7d30fde29d99288ac3090d38e07?d=https://replit.com/public/images/evalbot/evalbot_40.png&s=256"
alt="">
<span class="text-[#F5F9FC]">torcado</span>
</div>
<span class="py-1 px-2 rounded-full text-sm text-[#FFCFCF] bg-red-900">Award Winning Game</span>
</div>
<p class="text-sm hidden group-hover:block text-[#F5F9FC]">A hungry snake went looking for food, and stumbled
upon a peculiar, spicy pepper. Help the snake eat all the food and get back to its home!</p>
</div>
</div>
<div class="w-full p-4 bg-[#1c2333] border border-gray-900 rounded-xl md:w-1/3 group">
<h1 class="text-xl font-semibold text-white text-start">Blob Generator</h1>
<img class="object-cover w-full mt-8 rounded-xl"
src="https://replit.com/public/images/featured-repls/omar/cover.png" alt="">
<div class="flex flex-col mt-8 space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 mr-2"
src="https://replit.com/cdn-cgi/image/width=1920,quality=80,format=auto/https://storage.googleapis.com/replit/images/1647886510244_175337fd83b08debac903f1f88758d20.jpeg"
alt="">
<span class="text-[#F5F9FC]">Omar</span>
</div>
<span class="px-2 py-1 text-sm bg-green-900 rounded-full text-green-50">Creative Coding</span>
</div>
<p class="text-sm hidden group-hover:block text-[#F5F9FC]">Create your own parametrically-defined blob matrix.
Open website on desktop to download a screenshot with one click, show me what you make!</p>
</div>
</div>
<div class="w-full p-4 bg-[#1c2333] border border-gray-900 rounded-xl md:w-1/3 group">
<h1 class="text-xl font-semibold text-white text-start">Replyte</h1>
<img class="object-cover w-full mt-8 rounded-xl"
src="https://replit.com/public/images/featured-repls/ironcladdev/cover.png" alt="">
<div class="flex flex-col mt-8 space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 mr-2"
src="https://replit.com/cdn-cgi/image/width=1920,quality=80,format=auto/https://storage.googleapis.com/replit/images/1662665479969_1173707b428ef17419de4940af146e6a.png"
alt="">
<span class="text-[#F5F9FC]">IroncladDev</span>
</div>
<span class="px-2 py-1 text-sm bg-indigo-900 rounded-full text-indigo-50">Chat GPT</span>
</div>
<p class="text-sm hidden group-hover:block text-[#F5F9FC]">
Chat in realtime with your fellow replers, enjoy, and have fun! Replyte is the place to hang out with everyone on replit!!</p>
</div>
</div>
</div>
</section>