JSFiddle - React, Tailwind, and code Playground

by emgiezet

HTML

<html>
    <head>
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet,</h1>
        <hr />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at consequat enim. Integer ac nunc sem, iaculis sagittis lectus. Vestibulum commodo mollis justo, ut varius leo accumsan vel. Nullam elementum condimentum elit non fermentum. Aliquam pretium mattis lectus ut ornare. Morbi mollis facilisis pharetra. Nam vel mi sit amet ante vestibulum ultricies sit amet vitae erat. Vivamus venenatis metus et leo malesuada pellentesque. Integer orci neque, accumsan a hendrerit sit amet, pretium ut leo. Suspendisse potenti. Donec eros nisl, molestie id rhoncus fermentum, interdum et arcu. Duis euismod adipiscing enim ut luctus. </p>
        <hr />
        <p>
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non dui est. Nunc ornare viverra ultricies. Vivamus convallis, lorem sit amet faucibus pharetra, orci ante blandit turpis, ultrices pulvinar lectus diam id lorem. Nam tincidunt condimentum mi, eu molestie metus scelerisque at. Etiam a diam ut lorem vestibulum dapibus ac ac quam. Etiam dapibus sapien in dolor ultricies eget facilisis metus dictum. Quisque vulputate semper erat, non hendrerit ligula semper sit amet. Morbi at rhoncus odio. Sed dapibus leo vel lorem auctor ut ultrices urna suscipit. Morbi risus nunc, suscipit at sagittis eu, sodales nec massa. Fusce nec mauris nunc.   
        </p>
    </body>
</html>

CSS

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(left , rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -o-linear-gradient(left , rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -moz-linear-gradient(left , rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -webkit-linear-gradient(left , rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -ms-linear-gradient(left , rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -webkit-gradient(linear,
        left bottom,
        right bottom,
        color-stop(0, rgba(0, 0, 0, 0.1)),
        color-stop(0.5, rgba(0, 0, 0, 0.3)),
        color-stop(1.0, rgba(0, 0, 0, 0.1))
    );
}