JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div></div>


<div class="content">


  <p>
    Cras mattis iudicium purus sit amet fermentum. Inmensae subtilitatis, obscuris et malesuada fames. Etiam habebis sem dicantur magna mollis euismod. Cum ceteris in veneratione tui montes, nascetur mus.
  </p>
  <p>
    Cras mattis iudicium purus sit amet fermentum. Inmensae subtilitatis, obscuris et malesuada fames. Etiam habebis sem dicantur magna mollis euismod. Cum ceteris in veneratione tui montes, nascetur mus.
  </p>
  <p>
    Cras mattis iudicium purus sit amet fermentum. Inmensae subtilitatis, obscuris et malesuada fames. Etiam habebis sem dicantur magna mollis euismod. Cum ceteris in veneratione tui montes, nascetur mus.
  </p>


  <figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
      <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>


  </figure>

  <p>
    Cras mattis iudicium purus sit amet fermentum. Inmensae subtilitatis, obscuris et malesuada fames. Etiam habebis sem dicantur magna mollis euismod. Cum ceteris in veneratione tui montes, nascetur mus.
  </p>

  <figure>
    <img src="https://placekitten.com/g/600/300" alt="">
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
  </figure>



  <p>
    Cras mattis iudicium purus sit amet fermentum. Inmensae subtilitatis, obscuris et malesuada fames. Etiam habebis sem dicantur magna mollis euismod. Cum ceteris in veneratione tui montes, nascetur mus.
  </p>


</div>

SCSS

div {
  border-top: 1px solid red;
}

p,
blockquote,
figure {
  margin: 0;
  padding: 0;
}

/* Specific taind classes */

.mt-4 {
  margin-top: 14px;
}

.mt-8 {
  margin-top: 28px;
}

.mb-8 {
  margin-top: 28px;
}

.font-verdana {
  font-family: "Verdana";
}

.font-georgia {
  font-family: "georgia";
}


.font-size-m {
  font-size: 16px;
}

.font-size-xl {
  font-size: 20px;
}



div.content {

  /* Paragraph */
  p {
    font-family: "Verdana";
    /* @apply font-family-verdana */
    font-size: 16px;
    /* @apply font-size-m */

    &+p {
      margin-top: 28px;
      /* @apply mt-8 */
    }
  }

  /* Figure */
  figure {
    margin-top: 28px;
    /* @apply mt-8 */
    margin-bottom: 28px;
    /* @apply mb-8 */

    figcaption {
      margin-top: 14px;
      /* @apply mt-4 */
    }
  }

  /* Blockquote */
  figure {
    blockquote {
      p {
        font-size: 20px;
        /* @apply font-size-xl */

      }
    }

  }


  /* Image */
  figure {
    img {
      width: 100%;
    }
  }


  /* Video */



}