JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="task1 left">
        <b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy bh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</b>
    </div>
    <div class="task1 right">
        <b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy bh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</b>
    </div>
    <hr>
    
    <div class="task2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy bh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
    <hr>
    
    <div class="task3">
        I&lt;<span class="task3">&#10084;</span>&gt; NY &amp; SF
    </div>
    <hr>
    
    <div class="task4-blue">
        <div class="task4 task4-1">
            <b>99999999<br>100<br>200</b>
        </div>
        <div class="task4 task4-2">
            <b>100<br>200</b>
        </div>
        <div class="task4 task4-3">
            <b>10000</b>    
        </div>
    </div>
    <hr>

    <div class="task5">
        Это <span class="task5 red">красный</span>, <span class="task5 yellow">желтый</span>, <span class="task5 green">зеленый</span> цвета.
    </div>
    <hr>

CSS

body {
    background-color: #D7E1FD;
    border: solid 5px;
    }

    div {
        /*border: solid 2px;*/
    }
    
    div.task1 {
    width: 66%;
    }
    
    div.left {
    background-color: #FEFD8F;
    margin: 10px auto 10px 10px;
    }
    
    div.right {
    background-color: #F6CCFC;
    margin: 10px 10px 10px auto;
    }

    div.task2 {
        font-size: 14px;
        text-align: left;
        max-width: 580px;
        background-color: #E2FFDC;
        padding: 0px 10px 0px 10px;
        margin: auto;
    }

    div.task3 {
        font-family: Times;
        font-size: 50px;
        text-align: center;
    }

    span.task3 {
        color: red;
        margin: auto;
    }

    div.task4 {
        border: solid 2px;
        padding: 10px;
        background-color: #FEFA8F;
        display: inline-block;
        vertical-align: top;
    }

    div.task4-blue{
        padding: 10px;
    }

    div.task4-1 {
    }

    div.task4-2 {
    }

    div.task4-3 {
        vertical-align: bottom;
    }

    div.task5 {
        text-align: center;
        font-size: 50px;
    }

    span.task5 {
        padding: 0px 6px 0px 6px;        
    }

    span.red {
        color: #A61506;
        background-color: #F7B4AD;
    }

    span.yellow {
        color: #7D7305;
        background-color: #FCF38D;
    }

    span.green {
        color: #227F09;
        background-color: #CEFFC1;
    }