JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">

</head>
<body>
    <div class="totalContainer">
        <div class="viewLogTitle">
            <div class="viewLogText">
                View Report Log
            </div>
        </div>
        <div id="reportLog" class="reportLog">
            <div class="dateFilter">
                <div class="errorMessageDiv">
                    <div class='validationheader'>
                        Please correct the following:</div>
                    <ul>
                        <li>Date Range should be valid date in MM/DD/YYYY format </li>
                    </ul>
                </div>
                <div class="filterElements">
                    <div class="filterTitle">
                        Date Range:
                    </div>
                    <div class="filterContents">
                        <div class="fromSection">
                            From:
                            <input name="ctl00$detailContentPlaceholder$repReports$ctl01$txtFromDate" type="text"
                                id="detailContentPlaceholder_repReports_txtFromDate_1" class="dateEntryBoxFrom" />
                        </div>
                        <div class="toSection">
                            To:
                            <input name="ctl00$detailContentPlaceholder$repReports$ctl01$txtToDate" type="text"
                                id="detailContentPlaceholder_repReports_txtToDate_1" class="dateEntryBoxTo" />
                        </div>
                        <input type="submit" name="ctl00$detailContentPlaceholder$repReports$ctl01$btnSubmit"
                            value="Get Reports" id="detailContentPlaceholder_repReports_btnSubmit_1" class="searchReportButton" />
                    </div>
                </div>
            </div>
        </div>
   ...

CSS

.totalContainer
        {
            min-width: 1000px;
            width: 100%;
            display:block;
        }
        .errorMessageDiv
        {
            width: 80%;
            display: block;
            float: left;
            clear: both;
            color: #56300a;
            overflow: auto;
            border: 1px solid #b08b34;
            padding: 0 0 0 0;
            margin: 10px 0 10px 10px;
            font-weight: bold;
        }
        
        .reportLog
        {
            width: auto;
            min-height: 150px;
            margin: 3px 0px 0 20px;
            border: 1px solid #A7A7A6;
            background-color: #FEF7CD; /*#FBEEF0*/
        }
        
        .dateFilter
        {
            font: normal 9pt Arial;
            border: 1px solid #2377D1;
            background-color: #ffffff;
            margin: 5px 5px 5px 5px;
            display: block;
            min-height: 40px;
        }
        
        
        .viewLogTitle
        {
            width: 100%;
            padding: 0 0px 0px 20px;
        }
        
        .validationheader
        {
            background-color: #e5d9bd;
            color: #56300a;
            height: 14px;
            font-weight: bold;
            border-bottom: 1px solid #b08b34;
            padding-top: 3px;
        }
        
        .filterElements
        {
            padding: 10px 5px 10px 5px;
            width: 70%;
        }
        
        .filterTitle
        {
            display: inline;
            font: bold 9pt Arial;
        }
        
        
        .filterContents
        {
            display: inline;
        }
        
        .fromSection
        {
            margin: 0 5px 0 15px;
            display: inline;
        }
        
        .toSection
        {
            margin: 0 15px 0 0px;
            display: inline;
        }