JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="//www.jsviews.com/download/jsrender.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">



<body>
    <h3>HTML tag test</h3>
    <div class='container cart3'>
    </div>
</body>

<script type="text/x-jsrender" id='template'>
  


<div class="row">
    <div class="col-sm-3">
        <div class="row" style="height:78%;">
            <div class="col-sm-12">
                <img src="{{:image}}" class="d-block" alt="">
            </div>
        </div>
        <div class="row" style="height:22%; vertical-align:bottom;">
            <div class="col-sm-12">
                <a href="javascript:void(0);" data-variantid="{{:variant_id}}" class="remove"
                   style="{{:~(product_type === 'BoxingPackaging' || product_type === 'ProcessingFee') ? 'display:none' : ''}}">Remove</a>
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        <div class="row" style="height:78%;">
            <div class="col-sm-12">
                <div class="content" style="height:96%;">
                    <h1>{{:product_title}}</h1>
                    {{:variant_title}}
                </div>
            </div>
        </div>
        <div class="row" style="height:22%; vertical-align:bottom;">
            <div class="col-sm-12">
                <div class="content" style="padding:0;">
                    <span class="qt-minus {{:~(product_type === 'BoxingPackaging' || product_type...

CSS

body {
            background: #eee;
            /*margin: 0;
            padding: 0;*/
            /*overflow-x: hidden;*/
        }
        
        
        .cart3 img {
            min-height: 100px;
            max-height: 200px;
            height: auto;
            width: 100%;
        }

        .cart3 div {
            padding: 0 6px;
        }

        .cart3 .remove {
            font-size: 22px;
            font-family: 'Open Sans';
            font-weight: 300;
            color: #fff;
            display: block;
            width: 100%;
            padding: 5px;
            text-align: center;
            background: #53b5aa;
            line-height: 40px;
        }

            .cart3 .remove:hover {
                text-decoration: none;
            }

        .cart3 .content {
            background-color: #fff;
            border: 1px solid #ccc;
            border-style: none none solid none;
            float: left;
            width: 100%;
        }

        .cart3 .content {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            /*height: 140px;
            padding: 0 20px;
            width: 75%;*/
        }

            .cart3 .content h1 {
                color: #53b5aa;
                font-size: 25px;
                font-weight: 300;
                margin: 17px 0 20px 0;
            }

        .cart3 .btn {
            background: #53b5aa;
            border: 1px solid #999;
            border-style: none none solid none;
            cursor: pointer;
            display: block;
            color: #fff;
            font-size: 20px;
            font-weight: 300;
            padding: 16px 0;
            width: 290px;
            text-align: center;
            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -ms-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear;
        }

            .cart3 .btn:hover...

JavaScript

var test = {callme:function(d){return d;}};


var steve = {"token":"cef142dd5213a997e0cfb8c13fd68b89","note":null,"attributes":{"_findify_id":"{\"uniq_id\":\"kpO5XmQsqM8Bvnw0\",\"visit_id\":\"rbouLAbiy63iSgbo\"}"},"original_total_price":100085,"total_price":100085,"total_discount":0,"total_weight":12246.994,"item_count":7,"items":[{"id":12798967513174,"properties":null,"quantity":1,"variant_id":12798967513174,"key":"12798967513174:7dec24599f3dd25c7b86b9949a6078d5","title":"Processing Fee","price":3385,"original_price":3385,"discounted_price":3385,"line_price":3385,"original_line_price":3385,"total_discount":0,"discounts":[],"sku":"","grams":0,"vendor":"RareFishUSA","taxable":true,"product_id":1396282490966,"gift_card":false,"url":"/products/processing-fee-19?variant=12798967513174","image":"https://cdn.shopify.com/s/files/1/0001/8382/8520/products/processingFeeImg_ef717f41-1ab7-431e-88a3-812cf1103011.jpg?v=1541095083","handle":"processing-fee-19","requires_shipping":true,"product_type":"ProcessingFee","product_title":"Processing Fee","product_description":"","variant_title":null,"variant_options":["Default Title"]},{"id":3797191229480,"properties":null,"quantity":1,"variant_id":3797191229480,"key":"3797191229480:fb2c590aa8bea38b138881114703f196","title":"Cyphotilapia Frontosa Moba - 2 inches","price":4900,"original_price":4900,"discounted_price":4900,"line_price":4900,"original_line_price":4900,"total_discount":0,"discounts":[],"sku":"","grams":907,"vendor":"RareFishUSA","taxable":false,"product_id":453310382120,"gift_card":false,"url":"/products/cyphotilapia-frontosa-moba?variant=3797191229480","image":"https://cdn.shopify.com/s/files/1/0001/8382/8520/products/Cyphotilapia_Frontosa_Moba_2.jpg?v=1539912080","handle":"cyphotilapia-frontosa-moba","requires_shipping":true,"product_type":"","product_title":"Cyphotilapia Frontosa Moba","product_description":"","variant_title":"2 inches","variant_options":["2...