JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="page-wrap">
    
        <h1>Simple Styles for &lt;hr>'s</h1>
    
        <hr class="style-one">
        <div class="code">
        <h2>Code</h2>
        <p>/* Gradient color1 - color2 - color1 */
        
</p>
        </div>
        
        <hr class="style-two">
        <div class="code">
        <h2>Code</h2>
        <p>/* Gradient transparent - color - transparent */
        
</p>
        </div>
        
        <hr class="style-three">
        <div class="code">
        <h2>Code</h2>
        <style>/* Double-color dashed line */
        
</style>
        </div>
        
        <hr class="style-four">
        <div class="code" style="margin-top: -5px;">
        <h2>Code</h2>
        <p>/* Single-direction drop shadow */
        
</p>
        </div>
        
        <hr class="style-five">
        <div class="code" style="margin-top: 13px;">
        <h2>Code</h2>
        <style>/* Cloud */
        
</style>
        </div>
        
        <hr class="style-six">
        <div class="code">
        <h2>Code</h2>
        <p>/* Inset, by Dan Eden */
        
</p>
        </div>
        
        <hr class="style-seven">
        <div class="code" style="margin-top: -27px;">
        <h2>Code</h2>
        <p>/* Flaired edges, by Tomas Theunissen */
        
</p>
        </div>
        
        <hr class="style-eight">
        <div class="code" style="margin-top: -20px;">
        <h2>Code</h2>
        <p>/* Glyph, by Harry Roberts */
        
</p>
        </div>
    
    </div>
    
<br class="ignore-code">

CSS

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}

hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

hr.style-three {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

hr.style-five {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style-five:after {  /* Not really supposed to work, but does */
    content: "\00a0";  /* Prevent margin collapse */
}

hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

hr.style-seven {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;    
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
   ...

JavaScript

$(function() {

    $("p").hide();

    $(".code").click(function() {
    
        $(this)
            .find("p")
            .slideToggle();
    
    });

});