JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<div class="row mb-4">
    <div class="col-xl-4">
        <h1>h1. Heading 1</h1>
        <h2>h2. Heading 2</h2>
        <h3>h3. Heading 3</h3>
        <h4>h4. Heading 4</h4>
        <h5>h5. Heading 5</h5>
        <h6>h6. Heading 6</h6>
    </div>
    <div class="col-lg-4">
        <h6>Unstyled lists</h6>
        <ul class="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
                <ul>
                    <li>Phasellus iaculis neque</li>
                    <li>Purus sodales ultricies</li>
                    <li>Vestibulum laoreet porttitor sem</li>
                    <li>Ac tristique libero volutpat at</li>
                </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
        </ul>
    </div>
    <div class="col-lg-4">
        <h6>Lead</h6>
        <p class="lead mb-5">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
        </p>

        <h6>Inline Text Elements</h6>
        <p>You can use the mark tag to <mark>highlight</mark> text.</p>
        <p><del>This line of text is meant to be treated as deleted text.</del></p>
        <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
        <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
        <p><u>This line of text will render as underlined</u></p>
        <p><small>This line of text is meant to be treated as fine print.</small></p>
        <p><strong>This line rendered as bold text.</strong></p>
        <p><em>This line rendered as italicized text.</em></p>
    </div>
    <div class="col-lg-4">

    </div>
</div>



<div...

CSS

/* ==================== Типографика ==================== */
h6, h5, h4, h3, h2, h1, .h6, .h5, .h4, .h3, .h2, .h1 {
padding: 0;
margin: 0 0 .8rem 0;
font-weight: bold;
}

h1, .h1 {
font-size: 2.375rem;
line-height: 1.1;
}
h2, .h2 {
font-size: 2.125rem;
line-height: 1.2;
}
h3, .h3 {
font-size: 1.875rem;
line-height: 1.3;
}
h4, .h4 {
font-size: 1.625rem;
line-height: 1.4;
}
h5, .h5 {
font-size: 1.375rem;
line-height: 1.5;
}
h6, .h6 {
font-size: 1.125rem;
line-height: 1.6;
}

@media (max-width: 768px) {
h1, .h1 {
font-size: 2rem;
}
h2, .h2 {
font-size: 1.813rem;
}
h3, .h3 {
font-size: 1.625rem;
}
h4, .h4 {
font-size: 1.438rem;
}
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1.063rem;
}
}

p, .p {
padding: 0;
margin: 0 0 1rem 0;
font-size: 1rem;
}