JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p class="subhead">Initial Letter<p>

<p><span class="first-letter">O</span>nce upon a time in a faraway land...<p>


<p class="drop-cap">
    What is the best Some If When 5 ways ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat.
</p>


<div class="main">

<div>
hello
</div>

<p>
    What is the best Some If When 5 ways ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat.
</p>

<p>
    What is the best Some If When 5 ways ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat.
</p>






</div>

CSS

p {font-size:16px;line-height:24px;font-family:arial;}

.subhead::first-letter {
 font-size: 35px;
  line-height: 70px;
}

.first-letter {
  font-size: 35px;
  line-height: 70px;
}

P.drop-cap:first-letter {
    font-size: 48px;
    line-height:48px;
    float: left;
    margin: 0 5px 0 -2px;
    color:blue;
    font-weight:bold;
}


.main p:first-of-type::first-letter {
    font-size: 48px;
    line-height:48px;
    float: left;
    margin: 0 5px 0 -2px;
    color:blue;
    font-weight:bold;
}