JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
    <div class="floatBox">floatBox</div>
    <ul class="fixWrapper">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ul>
        <p class="fixWrapper">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>u
</div>

CSS

.demo {
    width: 400px;
    margin: 0 auto;
}

h2 {
    margin: 0 0 15px;
}

.floatBox {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
}

.fixWrapper {
    overflow: hidden;
    zoom: 1;
}