<div class="border border-gray-500 m-4 max-w-md rounded p-4 text-gray-700">
  <div class="flex gap-4 items-center mb-4">
    <img
      src="http://placekitten.com/48/48"
      class="rounded-full h-12 w-12"
    />
    <div>
      <h3 class="text-gray-900 text-lg font-bold leading-6">Nice Title</h3>
      <h4 class="text-sm leading-5">A Very Nice Subtitle</h4>
    </div>
  </div>
  <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit accusamus numquam blanditiis obcaecati ullam, fugiat repudiandae autem at nostrum labore doloribus non porro similique eveniet.</p>
  <p>
    <a
      href="#"
      class="link text-blue-600 underline transition-opacity ease-in-out duration-300 hover:opacity-50 focus:opacity-50"
    >More Information</a>
  </p>
</div>
/* This pen is configured to pull in Tailwind CSS */
/* See: https://tailwindcss.com/docs/installation/play-cdn */

/* ----- Global / Reset ----- */

body {
  font: 16px/1.5 system-ui, sans-serif;
}
// Typically, you'll set Tailwind up first.
// See: https://tailwindcss.com/docs/configuration

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com