JSFiddle - React, Tailwind, and code Playground
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_7">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;
}
.market_6.market_7
{
background-color: pink;
}