example infoboxes in tailwind css

infobox.html

 <aside class="infobox">
    <header class="w-full text-lg text-center font-bold p-1 bg-blue-500 text-white">Infobox Title</header>
    <figure class="!my-0">
      <img src="https://images.unsplash.com/photo-1632951634308-d7889939c125" alt="" class="object-cover h-60" />
      <figcaption class="text-center md:!my-auto text-gray-600">Some woods and a river.</figcaption>
    </figure>
    <table class="w-full">
      <tr>
        <td class="first:!pl-2 first:font-bold">Born</td>
        <td class="!pr-0 !py-0">02 Jan. 1106</td>
      </tr>
      <tr>
        <td class="first:!pl-2 !pr-0 !py-0 first:font-bold">Mother</td>
        <td>A Lady</td>
      </tr>
      <tr>
        <td class="first:!pl-2 first:font-bold">Father</td>
        <td>A Lord</td>
      </tr>
      <tr>
        <td class="first:!pl-2 first:font-bold">Spouse</td>
        <td>Henry 'the Just'</td>
      </tr>

      <tr>
        <td class="first:!pl-2 first:font-bold">Noble Family</td>
        <td>House of King's Gate</td>
      </tr>
    </table>
  </aside>

tw.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .infobox {
    @apply w-max mx-auto bg-gray-200 md:float-right md:ml-7 border border-gray-400;
  }

  .infobox td {
    @apply !p-1;
  }
}