JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div class="single">
 <div class="entry-content">
 <h2>
소제목
</h2>
<h3>
소제목
</h3>
<h4>
소제목
</h4>

</div>
</div>

CSS

.single .entry-content h2 {
    font-size: 1.3em;
    margin: 1.15em 0 0.6em 0;
    font-weight: normal;
    position: relative;
    text-shadow: 0 -1px rgba(0,0,0,0.6);
    line-height: 40px;
    background: linear-gradient(rgba(53, 86, 129, 0.8), rgba(53, 86, 129, 0.8)), #355681;
    border: 1px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
    box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
    font-family: 'Muli', sans-serif;
}


.single .entry-content h3 {
    margin: 1em 0 0.65em 0;
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-size: 22px;
    line-height: 40px;
    color: #355681;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(53,86,129, 0.3);
}

.single .entry-content h4 {
   padding: 3px 9px;
      border-left: 5px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 15px;
}