JSFiddle - React, Tailwind, and code Playground

by ducrat

HTML

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus vel urna vel facilisis. In mi ante, pretium quis mi nec, sagittis gravida nunc. Nunc pulvinar fermentum libero sit amet molestie. Fusce vitae dui ligula. Fusce a lectus vel lectus dapibus
    laoreet sit amet quis felis. Aliquam sed tortor quis eros tristique ullamcorper. Nunc sapien nunc, sollicitudin id lacus feugiat, vulputate viverra dolor. Maecenas sit amet aliquet diam. Praesent nulla orci, sollicitudin ac neque nec, dapibus gravida
    odio. <em>Pellentesque imperdiet erat eu tortor dictum, et mollis augue volutpat.</em> <a href="http://www.kompiajaib.com/2014/11/membuat-blockquote-lebih-menarik-dengan.html" title="Membuat Blockquote Lebih Menarik Dengan CSS">Example link here</a><cite>Kompi Ajaib</cite></p>
</blockquote>

CSS

blockquote {
  display: block;
  background: #fff;
  padding: 25px 15px 10px;
  margin: 20px 0;
  position: relative;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2em;
  color: #666;
  text-align: justify;
  border-left: 15px solid #555;
  border-right: 2px solid #555;
  box-shadow: 2px 2px 15px #ccc
}

blockquote::before {
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #999;
  position: absolute;
  left: 10px;
  top: 15px;
  text-shadow: 2px 2px 0 #ccc
}

blockquote::after {
  content: ""
}

blockquote a {
  text-decoration: none;
  color: #ffa133
}

blockquote a:hover {
  color: #333
}

blockquote em {
  font-style: italic
}

blockquote p {
  margin: 0!important
}

blockquote cite {
  color: #999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:before {
  content: "\2014 \2009";
}