[ Component ]
Article Card

· article
Copy as
HTML
JSX
            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-lg bg-white shadow w-96 p-2"><img src="https://fastly.picsum.photos/id/167/400/300.jpg?hmac=So1uydzcHWZQf08_tV2hYnNc3PYSVLdGbnUujMl9te8" class="rounded-lg mb-4">
    <div class="px-4 py-1">
      <h1 class="text-lg font-semibold mb-2">City Boats</h1>
      <p class="text-gray-600 mb-4">This is a sample article description of an article about city boats</p><button class="block ml-auto mb-2 px-4 py-2 bg-blue-600 text-white rounded-md transition-colors hover:bg-blue-700 select-none">Read more</button>
    </div>
  </div>
</div>