JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="page">

<div class="button">Click me</div>

  <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur expedita ab, obcaecati facilis quo possimus nobis fugit commodi unde exercitationem, quisquam sequi quod molestiae dolor fugiat laboriosam libero repellat.</p>
  <p class="bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ducimus magni numquam accusantium nisi, reiciendis corporis enim voluptate fuga hic optio quisquam. Neque, quaerat dolores, sunt similique nesciunt voluptatibus autem.</p>
 <p class="important">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus non ipsum maiores assumenda vel, architecto inventore ea neque recusandae. Cupiditate ratione eum corrupti expedita eveniet tempora unde, nisi consectetur aliquam.</p>
 <p class="bold">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, fugit eius sapiente nobis distinctio tenetur. Sit nemo recusandae voluptatem! Eveniet ex laboriosam tempore vero, quaerat voluptate totam id cum nam.
 </p>
 <h1>sacfsd</h1>
 <h2>sdkjfjsdigv</h2>
 <p><strong><i><em></em></i></strong></p>
 <b></b>
 <strong></strong>
 </div>
 
 <p>Lorem <b>bold</b>ipsum dolor sit amet, consectetur adipisicing elit. Libero sunt ipsa, <strong>bolder</strong>itaque iure aliquid dolorum labore consequuntur illo ducimus molestiae deserunt doloribus, id, suscipit distinctio tempora consequatur. Beatae, eaque quam!</p>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  background: #eee;
  padding: 20px;
}
 p  {
   color: #212121;
   font-family: Arial;
   font-size: 20px;
   line-height: 30px;
   margin-bottom: 40px;
 }
 b {
   font-weight: bold;
 }
 
 strong {
   font-weight: bolder;
   color: blue;
 }

.intro {
  font-size: 40px;
  line-height: 60px;
}

.bold {
  font-weight: bold;
}

.button {
  display: block;
  width: 100%;
  border: 1px solid black;
  line-height: 30px;
  padding: 15px  50px 15px 50px;
  text-align: center;
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  background: green;
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bolder;
  letter-spacing: 10px;
  font-family: arial;
  cursor: pointer;
  transition: all 0.5s ease;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  
  
}

.button:hover {
  background: red;
  color: yellow;
}