JSFiddle - React, Tailwind, and code Playground

Dropcap v4

by Jennifer Perrin

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing gravida orci, sit amet mattis orci vestibulum in. Donec posuere lacinia neque vitae bibendum. Ut ut libero sed massa pharetra placerat a id mauris. Morbi mollis, risus ac tempus ultricies, libero nisl ultrices neque, a semper sem velit vitae dolor. Aliquam erat volutpat. Nam faucibus massa a nisi porta vitae volutpat odio rhoncus. Pellentesque non ante nec turpis aliquet porttitor ac id turpis. Sed eleifend mauris eu nisi sagittis mattis interdum eros gravida. Cras at odio urna, et faucibus nibh. Ut vitae placerat nibh. Cras pharetra neque quis sapien iaculis consequat.</p>

<p>Proin ipsum neque, pretium sit amet mattis at, ultricies sed felis. Vivamus at neque non ipsum aliquet molestie non id velit. Nullam accumsan condimentum urna eu consequat. Nunc feugiat urna ac odio sodales nec elementum sapien condimentum. Maecenas ac nulla et tortor egestas cursus vel id lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eu nunc ipsum, vel ullamcorper metus.</p>

CSS

body {
    margin: 50px auto;
    width: 450px;
}
p {
    font: 16px/24px Georgia, serif;
    margin-bottom: 25px;
    position: relative;
}
/* Drop Cap */

p:first-of-type:first-letter {
    background-color: #ccc;
    background-image: -webkit-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      #fff 25%, #fff 50%,
                      transparent 50%, transparent 75%,
                      #fff 75%, #fff 100%);
    background-image: -moz-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      #fff 25%, #fff 50%,
                      transparent 50%, transparent 75%,
                      #fff 75%, #fff 100%);
    background-image: -ms-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      #fff 25%, #fff 50%,
                      transparent 50%, transparent 75%,
                      #fff 75%, #fff 100%);
    background-image: -o-linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      #fff 25%, #fff 50%,
                      transparent 50%, transparent 75%,
                      #fff 75%, #fff 100%);
    background-image: linear-gradient(right bottom,
                      transparent 0%, transparent 25%,
                      #fff 25%, #fff 50%,
                      transparent 50%, transparent 75%,
                      #fff 75%, #fff 100%);
    background-size: 4px 4px;
    color: #444;
    color: hsla(0,0%,0%,.75);
    float: left;
    font: bold 62px/62px Baskerville, Georgia, serif;
    margin: 10px 12px 0 0;
    padding: 9px 21px 11px 19px;
    text-align: center;
    text-shadow: 3px 3px 0 #fff;
}
p:first-of-type:first-line {
    font-variant: small-caps;
    letter-spacing: 1px;
}

JavaScript

// Still experimenting with the pseudo-element on the body (and overflow-x: hidden; on the html element).