JSFiddle - React, Tailwind, and code Playground

by justamir

HTML

<body>
        <div id="item">
            <div id="triangle"></div>
            <h1>Assault Rifle</h1>
            <div id="item-content">
                <div id="item-left">
                    <h2>Type</h2>
                    <h2>Stacksize</h2>
                </div>
                <div id="item-right">
                    <h3>Weapon</h3>
                    <h3>1</h3>
                </div>
                <h4>Weapon Stats</h4>
                <div id="item-left">
                    <h2>Fire Mode</h2>
                    <h2>Attack Rate</h2>
                    <h2>Damage</h2>
                    <h2>&nbsp;</h2>
                    <h2>&nbsp;</h2>
                    <h2>&nbsp;</h2>
                    <h2>Recoil</h2>
                    <h2>Range</h2>
                    <h2>Capacity</h2>
                </div>
                <div id="item-right">
                    <h3>Full Automatic</h3>
                    <h3><i>Unknown</i></h3>
                    <h3>Head: 100</h3>
                    <h3>Chest: 61</h3>
                    <h3>Arms: 11</h3>
                    <h3>Legs: <i>unknow</i></h3>
                    <h3>Medium-Severe</h3>
                    <h3>250 ~ 400m</h3>
                    <h3>30</h3>
                </div>
                <h4>Ammunition</h4>
                <div id="item-img">
                    <img src="images/5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                    <img src="images/Explosive_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                    <img src="images/HV_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                    <img src="images/Incendiary_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                </div>
                <h4>Crafting</h4>
                <div id="item-left">
                    <h2>Craftable</h2>
                    <h2>Known By Default</h2>
     ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

* {
    margin: 0;
    padding: 0;
}

body {
    background: #222;
    font-family: 'Open Sans', sans-serif;
}

#item {
    margin-bottom: 2%;
    margin-top: 8px;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    width: 300px;
}

#triangle {
    border-bottom: 12px solid #3399cc;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid transparent;
    margin: 0 auto;
    width: 0;
}

#item h1 {
    background: #3399cc;
    color: #fff;
    font-size: 140%;
    font-weight: 300;
    padding: 20px 0;
    text-align: center;
}

#item-content {
    background: #f0f0f0;
    padding: 0 4%;
    overflow: hidden;
}

#item-left {
    background: #f0f0f0;
    float: left;
    padding: 5px 0;
    width: 50%;
}

#item-content h2 {
    color: #555;
    font-size: 95%;
    font-weight: 600;
    padding: 5px 0;
    padding-left: 10px;
    text-align: left;
    width: 100%;
}

#item-right {
    background: #f0f0f0;
    float: right;
    padding: 5px 0;
    width: 50%;
}

#item-content h3 {
    color: #555;
    font-size: 95%;
    font-weight: 300;
    padding: 5px 0;
    text-align: left;
    width: 100%;
}

#item-content h4 {
    background: #3399cc;
    color: #fff;
    font-size: 100%;
    font-weight: 300;
    padding: 5px 0;
    text-align: center;
}