Card Case Studies - Tailwind Component
simple component card case studies, it is use Tailwind CSS to create this beautiful card tailwind component.
card
Loading component...
93 lines
<div class="p-8 dark">
<div class="w-full min-h-screen bg-blue-400 py-20 sm:py-52 dark:bg-gray-800">
<div class="items-center px-2 md:px-4 sm:py-8 m-auto">
<div
class="flex flex-col sm:flex-row pb-3 justify-center space-y-4 sm:space-y-0 sm:space-x-1 xl:space-x-6 mx-8 sm:mx-0">
<div class="w-full p-2 lg:w-1/4 md:w-1/3 bg-[#feca57] dark:bg-gray-50 rounded-md shadow-sm">
<div class="flex flex-col">
<div class="flex flex-row items-center justify-between px-4 py-4">
<div class="flex text-xs text-gray-600">23 February 2022</div>
<div class="text-sm text-gray-400 sm:text-base">
<img src="https://iconape.com/wp-content/png_logo_vector/amazon-2.png" alt="" class="h-5 w-5" />
</div>
</div>
<div class="px-4">
<button class="mt-2 text-xs px-2 py-1 text-gray-300 bg-gray-900">Case Study</button>
<h2 class="my-3 font-bold text-2xl text-gray-800">Amazon Gift <br />Pay</h2>
<div class="flex flex-row items-center justify-between w-full mb-2">
<div class="text-gray-800 font-medium text-sm">Desktop <span class="text-4xl font-bold">.</span> Mobile
</div>
<div class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mt-2 text-gray-700 hover:text-gray-800"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="w-full p-2 lg:w-1/4 md:w-1/3 bg-white dark:bg-gray-50 rounded-md shadow-sm">
<div class="flex flex-col">
<div class="flex flex-row items-center justify-between px-4 py-4">
<div class="flex text-xs text-gray-600">23 February 2022</div>
<div class="text-sm text-gray-400 sm:text-base">
<img src="https://cdn-icons-png.flaticon.com/128/0/747.png" alt="" class="h-5 w-5" />
</div>
</div>
<div class="px-4">
<button class="mt-2 text-xs px-2 py-1 text-gray-300 bg-gray-900">Case Study</button>
<h2 class="my-3 font-bold text-2xl text-gray-800">Apple Wallet<br />Payment</h2>
<div class="flex flex-row items-center justify-between w-full mb-2">
<div class="text-gray-800 font-medium text-sm">Tablet <span class="text-4xl font-bold">.</span> Mobile
</div>
<div class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mt-2 text-gray-700 hover:text-gray-800"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="w-full p-2 lg:w-1/4 md:w-1/3 bg-[#f3a683] dark:bg-gray-50 rounded-md shadow-sm">
<div class="flex flex-col">
<div class="flex flex-row items-center justify-between px-4 py-4">
<div class="flex text-xs text-gray-600">23 February 2022</div>
<div class="text-sm text-gray-400 sm:text-base">
<img
src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-icon-download-icons-18.png"
alt="" class="h-5 w-5" />
</div>
</div>
<div class="px-4">
<button class="mt-2 text-xs px-2 py-1 text-gray-300 bg-gray-900">Case Study</button>
<h2 class="my-3 font-bold text-2xl text-gray-800">Google Wallet <br />Payment</h2>
<div class="flex flex-row items-center justify-between w-full mb-2">
<div class="text-gray-800 font-medium text-sm">Mobile</div>
<div class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mt-2 text-gray-700 hover:text-gray-800"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
body {
font-family: 'Lato', sans-serif;
}
</style>