JSFiddle - React, Tailwind, and code Playground

by geortravel

HTML

<div class="bar-bold">
     <h1 class="headline-bar">Guest Details</h1> 
    <div class="inner">
        <div id="details">
            <div class="Guest" id="Guest">
                <legend id="guestbox">Guest 1</legend>
                <table>
                    <tbody>
                        <tr>
                            <td>First Name:
                                <br>
                                {firstname}
                            </td>
                            <td>Middle Name:
                                <br>
                                {middlename}
                            </td>
                            <td>Last Name:
                                <br>
                                {lastname}
                            </td>
                            <td>Birth Date:
                                <br>
                                {birthdate}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="separator"></div>
            </div>
                            
                            
                                        <div class="Guest" id="Guest">
                <legend id="guestbox">Guest 2</legend>
                <table>
                    <tbody>
                        <tr>
                            <td>First Name:
                                <br>
                                {firstname_2}
                            </td>
                            <td>Middle Name:
                                <br>
                                {middlename_2}
                            </td>
                            <td>Last Name:
                                <br>
                                {lastname_2}
                            </td>
                            <td>Birth Date:
                                <br>
                                {birthdate_2}
                            </td>
...

CSS

/*this is in midway template*/
 .last {
    margin-right: 0px!important;
}
.twelvecol {
    width: 100%;
}
.threecol {
    width: 22.05%;
}
.column {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
}
.ninecol {
    width: 74.05%;
}
/*copied from expedia*/
 .inner {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgb(51, 51, 51);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(51, 51, 51);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(51, 51, 51);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(51, 51, 51);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    color: rgb(51, 51, 51);
    display: block;
    font-family: arial, helvetica, clean, sans-serif;
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    vertical-align: baseline;
}
.bar-bold {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgb(0, 51, 102);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
 ...