JSFiddle - React, Tailwind, and code Playground

by ragebunnykickass

HTML

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="signals-layout.css">
</head>
<body>
    <div id="wrapper">
        <h1>Signals Room</h1>
        <!-- This is the main div that will take the width of the page -->
        <ul id="market_list">
            <li>
                <div class="market_1">Market #1</div>
                <div class="market_2">Market #2</div>
            </li>
            <li>
                <div class="market_3">Market #3</div>
                <div class="market_4">Market #4</div>
            </li>
            <li>
                <div class="market_5">Market #5</div>
                <div class="market_6">Market #6</div>
            </li>
        </ul>    
    </div>
    <footer>Footer</footer>
</body>
</html>

CSS

#wrapper
{
    width: 80%;
    margin: auto;
    background-color: red;
    
}

#market_list
{
    width: 100%;
    background-color: green;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

li
{
    padding: 10px;
    border: solid 1px transparent;
}

.card_border
{
    border-radius: 5px;
}
.market_1
{
    width: 40%;
    background-color: pink;    
    float: left;
    margin: auto;
    border-radius: 5px;
    box-shadow: 1px 1px 5px white;
}

.market_2
{
    width: 40%;
    background-color: yellow;
    float: right;
    margin: auto;
    border-radius: 5px;
    box-shadow: 1px 1px 5px white;
}

.market_3
{
    width: 40%;
    background-color: pink;
    float: left;
    border-radius: 5px;
    box-shadow: 1px 1px 5px white;
}

.market_4
{
    width: 40%;
    background-color: yellow;
    float: right;
    border-radius: 5px;
    box-shadow: 1px 1px 5px white;
}

.market_5
{
    width: 40%;
    background-color: pink;
    float: left;
    border-radius: 5px;
    box-shadow: 1px 1px 5px white;
}

.market_6
{
    width: 40%;
    background-color: yellow;
    float: right;
    border-radius: 5px;
    box-shadow: 1px 1px 5px white;
}