JSFiddle - React, Tailwind, and code Playground
by kougiland
HTML
<article class=shoppingCart>
<article class=shoppingWrapper>
<header>
<hgroup>
<h3>movies</h3>
</hgroup>
</header>
<article>
<ul>
<li>
<figure>
<img src="" alt="">
<figcaption>
<p></p>
<a class=trailer href=""> </a>
<a class=buyIt href=""> </a>
</figcaption>
</figure>
</li>
</ul>
</article>
</article>
<article class=shoppingWrapper>
<header>
<hgroup>
<h3>shopping Cart</h3>
</hgroup>
</header>
<ul>
<li></li>
</ul>
</article>
</article>CSS
article.shoppingCart{
width:100%;
min-height:640px;
position:relative;
clear:both;
}
article.shoppingCart article.shoppingWrapper{
float:left;
width:50%;
min-height:640px;
height:100%;
}
article.shoppingCart article.shoppingWrapper:first-child{
background:#333;
}
article.shoppingCart article.shoppingWrapper:last-child{
background:silver;
}
.shoppingWrapper:first-child header,.shoppingWrapper:last-child header{
clear:both;
height:100px;
width:100%;
}
.shoppingWrapper:first-child header{
background-color:red;
color:white;
}
.shoppingWrapper:last-child header{
background-color:white;
color:#333;
}
.shoppingWrapper header hgroup h3{
font-weight:900;
text-align:center;
font-size:30px;
line-height:100px;
}
article.shoppingCart article.shoppingWrapper:first-child article{
}
article.shoppingCart article.shoppingWrapper:first-child article ul{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li div{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li div figure{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li div figure img{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li div figure figcaption{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li div figure figcaption p{
}
article.shoppingCart article.shoppingWrapper:first-child article ul li div figure figcaption a{
}