JSFiddle - React, Tailwind, and code Playground

by Angel Ordax

HTML

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>
<fieldset class="featured-header color">
    <legend>It adapts to any kind of text measurement</legend>
</fieldset>
<fieldset class="featured-header radius">
    <legend>You can play with border styles</legend>
</fieldset>
<fieldset class="featured-header">
    <legend>Try to resize the window, IT ADDAPTS!</legend>
</fieldset>
<fieldset class="featured-header double">
    <legend>
         <h2>The New York Times</h2>

    </legend>
</fieldset>
<fieldset class="featured-header cool">
    <legend>TOO COOL FOR SCHOOL</legend>
</fieldset>

CSS

.featured-header {
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
    border-color: #999;
}
.featured-header.color {
    border-color: orange;
}
.featured-header.color legend{
    color: orange;
}
.featured-header.radius {
    border-radius: 12px;
}
.featured-header.double {
    border-style: double;
    border-top-width: 6px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
.featured-header.cool {
    font-family: sans-serif;
}
.featured-header legend {
    -webkit-padding-start: 8px;
    -webkit-padding-end: 8px;
    background: transparent;
    /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal;
    /* I preffer the text to be regular instead of bold  */
    color: #999;
}