JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content-box">
<h2>Content box title</h2>
<p>Some text within the box.</p>
</div>
CSS
.content-box {
width: 100%;
border: 1px solid #a8b9c5;
position: relative;
padding: 8px;
margin-bottom: 8px;
font-size: 90%;
background-color: #FFF;
/* CSS3/PIE */
border-radius: 6px;
behavior: url(assets/scripts/PIE.htc);
}
.content-box h2 {
padding-left: 16px;
margin: -8px -8px 18px;
position: relative;
font-size: 110%;
font-weight: normal;
height: 38px;
line-height: 40px;
/* CSS3/PIE */
box-shadow: #777 0px 1px 5px;
border-radius: 5px 5px 0px 0px; /* We round the top corners to remove an pixels that
could interfer with the outer rounded corners */
-pie-watch-ancestors: 1; /* Since we change the classes on .content-box (.content-box-gray etc.),
we need to make sure PIE knows when the classes has changed on its
parent */
behavior: url(assets/scripts/PIE.htc);
}
JavaScript
// The JavaScript (jQuery) clone doesn't really need an explanation,
// but it's just a simple .clone()
$('.content-box').clone();