JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<article>
  <header>
    <h1>
      Pinned demo
    </h1>
    <button>
      close
    </button>
  </header>
  <img src="https://picsum.photos/300/200" alt="pinned image demo">
  <mark>sale!</mark>
  <main>
    <h1>Card Title</h1>
    <p>
      A basic card component with an image, title, description. By default, the image is on top and full-width, but inside large containes the miage is positioned on the left with the rest of the content beside it.
    </p>
  </main>
  <footer>
    <ul>
      <li>👍</li>
      <li>☺</li>
      <li>♡</li>
      <li>🗨</li>
      <li>&#128279;</li>
      <li>&#128227;</li>
    </ul>
  </footer>
</article>