JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
    <h4>Simple paragraph</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, leo in imperdiet feugiat, diam ante dictum dui, quis malesuada velit orci nec libero. Duis elementum pharetra mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, leo in imperdiet feugiat, diam ante dictum dui, quis malesuada velit orci nec libero. Duis elementum pharetra mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, leo in imperdiet feugiat, diam ante dictum dui, quis malesuada velit orci nec libero. Duis elementum pharetra mollis. Aliquam erat volutpat. Pellentesque vitae sem tellus. Nulla blandit, magna vitae venenatis facilisis, sem sapien posuere lorem, ac sodales mi quam eu sapien. Proin sed lorem eu tortor dignissim faucibus. Donec rutrum, ipsum et pulvinar vulputate, dui velit faucibus massa, non posuere metus dui ac nulla. </p>
    <br />
    <hr />
    <br />
    <h4>Simple paragraph and a left floated block</h4>    
    <div class="flBox"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, leo in imperdiet feugiat, diam ante dictum dui, quis malesuada velit orci nec libero. Duis elementum pharetra mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, leo in imperdiet feugiat, diam ante dictum dui, quis malesuada velit orci nec libero. Duis elementum pharetra mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, leo in imperdiet feugiat, diam ante dictum dui, quis malesuada velit orci nec libero. Duis elementum pharetra mollis. Aliquam erat volutpat. Pellentesque vitae sem tellus. Nulla blandit, magna vitae venenatis facilisis, sem sapien posuere lorem, ac sodales mi quam eu sapien. Proin sed lorem eu tortor dignissim faucibus. Donec rutrum, ipsum et pulvinar vulputate, dui velit faucibus massa, non posuere metus dui ac nulla.</p>
    <h4>Simple paragraph and a right floated...

CSS

/*General styles*/
     body
     {
     margin: 0;
     padding: 0;
     background: #f5f5f5;
     }
     .demo {
     width: 500px;
     margin: 160px auto 0 auto;
     background: white;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     padding: 30px;
     border: 1px solid #adaa9f;
     -moz-box-shadow: 0 2px 2px #9c9c9c;
     -webkit-box-shadow: 0 2px 2px #9c9c9c;
     }
     p {
       margin: 0;
       padding: 0;
       text-align: justify;
     }
     /* Gradient styles*/
     .flBox,
     .frBox  {
       float: left;
       height: 50px;
       width: 50px;
       margin: 0 20px 0 0;
       border: 1px solid #ccc;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
       -moz-box-shadow: inset 0 0 3px rgba(23,230,230,0.3), 0 0 5px rgba(23,230,230,0.5);
       -webkit-box-shadow: inset 0 0 3px rgba(23,230,230,0.3), 0 0 5px rgba(23,230,230,0.5);
       box-shadow: inset 0 0 3px rgba(23,230,230,0.3), 0 0 5px rgba(23,230,230,0.5);
     }
     .frBox  {
       float: right;
       margin: 0 0 0 20px;
      } 
     .fixWrapper {
       overflow: hidden;
       zoom: 1;
     }