JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<div class="wrap">
    <div id="builds" class="cols">
    
     <span class="firstcharacter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula in ex et   tristique. Sed sodales lacus sed augue fermentum, et tincidunt dui convallis. Morbi lectus lorem, elementum vitae quam sit amet, lobortis convallis lorem. Suspendisse eget finibus erat. Integer ac metus maximus tortor convallis placerat sit amet pharetra ipsum. Donec sodales eros neque, a commodo lorem tincidunt quis. Nunc accumsan quis turpis et consectetur.

    Integer lacinia est ipsum, quis aliquam nibh pharetra ut. Vestibulum sollicitudin ex a faucibus ornare. Sed fermentum, turpis a fermentum suscipit, eros mauris hendrerit tellus, quis tempor diam lacus imperdiet diam. Fusce viverra consectetur massa, cursus lacinia nulla egestas id. Nulla ac hendrerit lacus. Phasellus pretium sed lectus id commodo. Morbi ligula dui, euismod non dui eget, rhoncus eleifend eros. Aliquam tellus augue, rhoncus vitae tristique id, cursus sit amet urna. Phasellus fermentum, leo in lobortis laoreet, velit orci faucibus tortor, sed efficitur felis ante viverra nisi. Curabitur odio ante, gravida eu blandit vulputate, accumsan quis ipsum. Etiam sit amet lacinia arcu. Praesent elit enim, facilisis quis ligula hendrerit, sollicitudin venenatis orci.

    Aliquam id risus vitae massa iaculis consectetur vel id sapien. Donec ac urna et diam consequat vehicula. Donec scelerisque, dui ut congue sodales, eros est pulvinar velit, quis molestie dui justo id risus. Maecenas semper, magna vel commodo sagittis, ipsum nibh mattis eros, vel interdum ex nunc nec erat. Nunc convallis, odio sed interdum lobortis, orci urna bibendum neque, sed malesuada elit tellus sit amet leo. Aenean dignissim, tellus vitae pretium vestibulum, nisi eros ultricies ante, mollis ullamcorper justo justo quis lacus. Etiam odio sapien, iaculis ac suscipit et, aliquam ac neque. In sit amet odio ut mi sodales scelerisque at in nisl. Duis id...

CSS

.wrap {
    background: url("https://i.pinimg.com/564x/a7/d8/a3/a7d8a324ed4206a8fb6864ba0c168511.jpg") repeat center;
    padding: 60px 0;
    background-size: cover;
}
#builds {
    width: 80%;
    margin: 50px auto;
}
.cols {
    -webkit-column-width: 33.33333%;
    column-width: 33.33333%;
    -webkit-columns: 3;
    columns: 3;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    column-rule: 1px solid #111;
}
.item {
    height: auto;
    width: 100%;
}
.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}