JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
    <h2>Simple paragraph and a left floated block</h2>
    <div class="floatBox">floatBox</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>
    <hr />
    <h2>No wrapping paragraph and a left floated block</h2>
    <div class="floatBox">floatBox</div>
    <p class="fixWrapper">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...

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;
}