JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<html>
<head>
<img src="https://i.imgur.com/mIYJN2a.jpg" alt="W3Schools.com" style=width:128px;height:128px;>
<br>
1
<hr class='hb'>
<br>
<hr class='style-four'>
<hr>
</head>
</html>

CSS

img { 
    width:80%; margin-left:10%; margin-right: 10%
}
hr.hb { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}
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-four {
    height: 6px;
    border: 0;
    box-shadow: inset 0 6px 6px -6px black;
}

hr.style-five {
    border: 0;
    height: 0;
    box-shadow: 0 0 10px 1px black;
}