JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Game Elegance">
    <meta name="author" content="Govard Barkhatov">
    <link rel="icon" href="../../favicon.ico">
 
    <title>GameElegance</title>
 
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
   <js src="js/html5shiv.min.js"></js>
   <js src="js/respond.min.js"></js>
   <![endif]-->
</head>
 
<body>
 
<div class="container-fluid">
    <div class="row header">
        <div class="stars field-background col-xs-3">
 
            <div class="row">
                <div class="left-pic col-xs-6" id="star"></div>
                <div class="text-in-three col-xs-6">
                    1
                </div>
            </div>
 
        </div>
        <div class="jewels field-background col-xs-3">
 
            <div class="row halfheight">
                <div class="left-pic col-xs-6" id="diamond"></div>
                <div class="text-in-three col-xs-6">
                    2
                </div>
            </div>
 
        </div>
        <div class="coins field-background col-xs-3">
 
            <div class="row">
                <div class="left-pic col-xs-6" id="coin"></div>
                <div class="col-xs-6">
 
                    <div class="row halfheight">
                        <div class="text-in-three col-xs-6" id="coins-text">
                     ...

CSS

/*HEADER BEGIN*/
html,
body {
    background: url("../img/blue-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-y: hidden;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    color: white;
    padding: 0 auto;
    margin: 0 auto;
}
 
.header {
    padding: 0.5% 3%;
    border-top: 2px solid #ffe200;
    border-bottom: 2px solid #ffe200;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffae3a+0,f25f0a+49,ee4d09+50,d00000+100 */
    background: #ffae3a;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffae3a), color-stop(49%, #f25f0a), color-stop(50%, #ee4d09), color-stop(100%, #d00000));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffae3a', endColorstr='#d00000', GradientType=0);
    /* IE6-9 */
}
 
.field-background {
    background: url("../img/field.png") no-repeat center center;
    background-size: contain;
    padding: 1%;
}
 
.left-pic {
    background-size: auto 100%;
    padding: 7%;
    text-align: center;
}
 
.right-pic {
    position: absolute;
    background: url("../img/star.png") no-repeat center center;
    background-size: auto 100%;
    padding: 14%;
    margin-left: 25%;
   ...