Card - Copy this React, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Replicated-Design</title>-<link-href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"-rel="stylesheet">-<link-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"-rel="stylesheet">-<link-href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"-rel="stylesheet">-</head>-<body-class="bg-gray-100-font-roboto">-<!---Header--->-<header-class="bg-white-shadow-md">-<div-class="container-mx-auto-px-4-py-4-flex-justify-between-items-center">-<div-class="text-xl-font-bold">Logo</div>-<div-class="flex-space-x-4">-<a-href="#"-class="text-gray-700-hover:text-gray-900">Music</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Mixes</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">News</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Reverberation</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Downtempo-music</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Playlists</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Playboi-Carti</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Live</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Computer-Architecture</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">All</a>-<a-href="#"-class="text-gray-700-hover:text-gray-900">Mixtapes</a>-</div>-</div>-</header>-<!---Content-Area--->-<main-class="container-mx-auto-px-4-py-8">-<div-class="grid-grid-cols-1-md:grid-cols-2-lg:grid-cols-3-gap-8">-<!---Card-1--->-<div-class="bg-white-shadow-rounded-overflow-hidden">-<img-src="https://via.placeholder.com/400x200"-alt="Sketching-for-Inspiration"-class="w-full-h-48-object-cover">-<div-class="p-4">-<h2-class="text-lg-font-bold">Sketching-for-Inspiration</h2>-<p-class="text-gray-600">Online-courses-in-design,-craft,-3D,-animation,-and-so-much-more</p>-<span-class="text-sm-text-gray-500">Sponsored-·-Domestika</span>-</div>-</div>-<!---Card-2--->-<div-class="bg-white-shadow-rounded-overflow-hidden">-<img-src="https://via.placeholder.com/400x200"-alt="Mix---Yeat"-class="w-full-h-48-object-cover">-<div-class="p-4">-<h2-class="text-lg-font-bold">Mix---Yeat---if-we-being-real-(Slowed)-King-Baldwin-IV</h2>-<p-class="text-gray-600">Travis-Scott,-Yeat,-Metro-Boomin,-and-more</p>-<span-class="text-sm-text-gray-500">Updated-today</span>-</div>-</div>-<!---Card-3--->-<div-class="bg-white-shadow-rounded-overflow-hidden">-<img-src="https://via.placeholder.com/400x200"-alt="Mix---H.E.R.---Damage"-class="w-full-h-48-object-cover">-<div-class="p-4">-<h2-class="text-lg-font-bold">Mix---H.E.R.---Damage-(Official-Video)</h2>-<p-class="text-gray-600">H.E.R,-Muni-Long,-Coco-Jones,-and-more</p>-<span-class="text-sm-text-gray-500">Updated-today</span>-</div>-</div>-<!---Card-4--->-<div-class="bg-white-shadow-rounded-overflow-hidden">-<img-src="https://via.placeholder.com/400x200"-alt="Supreme-Court-Judge"-class="w-full-h-48-object-cover">-<div-class="p-4">-<h2-class="text-lg-font-bold">Supreme-Court-Judge-Isaac-Lenaola-blasts-Ruto,-Parliament-for-laxity-in-reconstituting...</h2>-<p-class="text-gray-600">Citizen-TV-Kenya</p>-<span-class="text-sm-text-gray-500">142K-views-·-1-day-ago</span>-</div>-</div>-<!---Add-more-cards-as-needed--->-</div>-</main>-<!---Footer--->-<footer-class="bg-white-shadow-md-p-4-flex-justify-around-items-center">-<i-class="fas-fa-home-text-blue-600"></i>-<i-class="fas-fa-wallet-text-gray-600"></i>-<i-class="fas-fa-comments-text-gray-600"></i>-<i-class="fas-fa-user-text-blue-600"></i>-</footer>-</body>-</html>
