JSFiddle - React, Tailwind, and code Playground

by gcarames

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
    
  <body>  
    <div style="width:400px;">
      <h1>Side-Pull</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse facilisis orci justo. Proin lacinia eros nec lorem posuere varius. Donec sodales tellus a tortor dignissim imperdiet.</p>
       
      <blockquote class="pull">
        This is a small yet extensible pull-quote. You could use this to enhance page flow and keep your visitors interested.
      </blockquote>
      <p>Integer suscipit pellentesque sapien vulputate congue. Suspendisse aliquet, felis mattis accumsan luctus, neque elit lobortis orci, eu placerat nibh neque venenatis augue. Nam auctor semper tincidunt. Nunc ultrices vehicula libero eu eleifend. Duis placerat odio eu felis condimentum semper.</p>
      
      <p>Donec luctus, lectus sed pellentesque pretium, magna massa pellentesque mi, sed ullamcorper ipsum dolor eu ante. Morbi commodo cursus auctor. Donec accumsan tellus et est malesuada quis tincidunt magna vehicula. Duis ac eros eget nisl tincidunt aliquet. Donec nec commodo mi.</p>
      
      <p></p>Quisque vehicula, sem ac fringilla vulputate, ante urna pharetra nunc, nec fringilla odio lectus vitae dolor. Phasellus aliquet augue vitae metus luctus blandit. Sed lacinia malesuada nibh, sit amet condimentum eros consectetur sed. Etiam eleifend nunc a dolor fringilla cursus. Proin et aliquam felis. Vestibulum nec diam justo.</p>
    </div> <!-- end wrapper -->      
  </body>
</html>

CSS

body { padding: 11px 15px; font-family: Arial, Tahoma, sans-serif; font-size: 12px; color: #454545; line-height: 14px; }
p { display: block; margin-bottom: 15px; }

/** pull-quote styles **/
pullquote { float: right; margin-left: 15px; width: 150px; font-size: 18px; line-height: 18px; color: #655c9d; margin-top: -12px; }