JSFiddle - React, Tailwind, and code Playground

x8 workset

by Entoarox

HTML

<div style="float:left;width:170px">
    <section style="height:70px;width:170px;box-sizing:border-box;"><img src="https://dl.dropboxusercontent.com/u/14002006/bg/exp.png" alt="Get Credits" style="width:164px;height:64px;border-radius:6px;margin:-7px;" /></section>
    <section onclick="shopCat('subscription')" id="btn-subscription" class="tab-left current">Subscription</section>
    <section onclick="shopCat('emoticons')" id="btn-emoticons" class="tab-left">Emoticons</section>
    <section class="tab-left disabled">Themes</section>
</div>
<section id="cat-subscription" style="width:750px;float:left;">
    <article class="shop">
        <img src="https://dl.dropboxusercontent.com/u/14002006/x8v2/sub1.png" alt="" />
        <h2>1 Day Subscription</h2>
        <div>Adds 1 day to your subscriber status.</div>
        <a href="#">Get Now</a>
        <span>FREE</span>
    </article>
    <article class="shop">
        <img src="https://dl.dropboxusercontent.com/u/14002006/x8v2/sub2.png" alt="" />
        <h2>2 Day Subscription</h2>
        <div>Adds 2 days to your subscriber status.</div>
        <a>Sold Out</a>
        <span>FREE</span>
    </article>
    <article class="shop">
        <img src="https://dl.dropboxusercontent.com/u/14002006/x8v2/sub7.png" alt="" />
        <h2>1 Week Subscription</h2>
        <div>Adds 7 days to your subscriber status.</div>
        <a href="#">Buy Now</a>
        <span>&cent;14</span>
    </article>
    <article class="shop">
        <img src="https://dl.dropboxusercontent.com/u/14002006/x8v2/sub30.png" alt="" />
        <h2>1 Month Subscription</h2>
        <div>Adds 30 days to your subscriber status.</div>
        <a href="#">Buy Now</a>
        <span>&cent;59</span>
    </article>
    <article class="shop">
        <img src="https://dl.dropboxusercontent.com/u/14002006/x8v2/sub90.png" alt="" />
        <h2>3 Month Subscription</h2>
        <div>Adds 90 days to your subscriber status.</div>
        <a href="#">Buy Now</a>
       ...

CSS

section
{
    position:relative;
    z-index:1;
    border:10px;
    border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAACIElEQVR42u2YzUtiYRSHdaImrCCyoZqammrKYS5FH0xfY19QBLWoRatLFlHTpjb1LyTYzm3uxn0MQWAt3EniQgwhsMABFSGExFUIbW6/I+eCRVHB7W0W74EH3Nx7Hs577ovnmEzPRxmoAFUGUAk+ArPplUEP1YLPoBl8AzYD6ABf+b2fgOU5kQ+gmiUU0AcGwSiYMAB6zzDoB12gBVg576MydaCTHnA6nVuBQOAwlUrFNIMimUxeBIPBE5fLtYcc0+An+M4VK30oRJWx2e32qVAodKC9cYTD4VNFURzI+Qv84CM0F/cMHVN/NBo90QRFPB4/R85FMADauPELQXZdbrd7RxMcHo/nD3LPgB7QoPdOI1UHR+UTLRSLxc6Qe4mr1KwfF32KQ5lMJilaKJ/P3yD3KvcSXS+Fy4ruhzHtnQK5N/haoLuq0Ej0Y0IKSSEpJIWkkBSSQlJICv1fQuO5XO5atMwt4qFQOY8gI5FIJCBaKJFIXCL3Gk+19FfaVAKaaIr0er37ooV8Pt8Rci/TkMHDRiHqeC6aJWNRMtls9spqtW4i7zzvEZp0IeqjdlosqKq6nU6n/4mQcTgcu8ipUrtw/9ToQmaeXhU+S/Uv4i3EMPul/H7/MVeGZCaLptZ7W5BSLlk3r0zm+GzX+Sswit9gBSxwZXp4YrU8taiq527vZTGjdkM640U7IhtXxvKSpVUjd32nQduzYlrBl8eWVXdPedTS6sAnXAAAAABJRU5ErkJggg==) 10 fill repeat;
}
section::after
{
    content:"";
    display:block;
    clear:both;
}
h1
{
    margin:-7px -7px 5px;
    padding:7px 7px 0;
    border-bottom:1px solid #ccc;
}
article.shop
{
    float:left;
    width:238px;
    padding:3px;
    height:100px;
   ...

JavaScript

window.shopCat=function(a)
{
    var els=document.querySelectorAll('section[id^="cat-"]'),els2=document.querySelectorAll('section[id^="btn-"]')
    for(var c=0;c<els.length;c++)
    {
        els[c].style.display='none';
        els2[c].classList.remove('current')
    }
    document.getElementById('cat-'+a).style.display='block';
    document.getElementById('btn-'+a).classList.add('current');
}
shopCat('subscription');