JSFiddle - React, Tailwind, and code Playground

by afnguyen

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<body>
    <div class="page">
        <div id="main">
            <div class="OneBySevenBin2">
                <div class="OneBySevenBin2middle">
                    <form action="/Widgets/OneBySevenBin2/8711600322080" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value="D7qrYkQ7J+a6Uo0kxw1lPyRF8LIGsFDkApHc9zeFMGKsCyCvU+JTge4EMgEF+FSVvN5jR/zRNR064Q/FHVv+2+BbIwd3NFwVT/uH++GpNl4mNvmBUita8w7Q1hzeNoBHxzvGe/7OF9rdtOBFDFjOzGmvpkACU2BmexykFV+3k8c=" />
                    <div class="divTitleArea">
                        <p>
                        </p>
                    </div>
                    <div class="stepOne">
                        <ul>
                            <li>
                                <div class="w6392597">
                                    <img id="332527" src="https://where-to-buy.co/content/images/logos/boots88x31.png"
                                        alt="" />
                                    <img style="float: left;" src="https://where-to-buy.co/content/images/pixel1.png"
                                        height="1" width="1" border="0" alt="" />
                                </div>
                            </li>
                            <li>
                                <div class="w6392597">
                                    <img id="114578" src="https://where-to-buy.co/content/images/logos/asda88x31.png"
                                        alt="" />
                                    <img style="float: left;" src="https://where-to-buy.co/content/images/pixel1.png"
                                        height="1" width="1" border="0" alt="" />
                                </div>
                            </li>
                            <li>
                                <div class="w6392597">
                                    <img id="108660"...

CSS

*
        {
            margin: 0;
            padding: 0;
        }
        
        img
        {
            border: none !important;
            margin: 0 !important;
        }
        
        h1
        {
            font-family: arial;
            font-weight: bold;
            font-size: 24px;
            color: #333;
        }
        
        h2
        {
            color: #333;
            font-family: arial,sans-serif;
            line-height: normal;
            margin: 0;
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;
            padding-top: 0;
            text-align: left;
        }
        
        .outofstock
        {
            float: left;
            padding-left: 24px;
            padding-right: 0;
            padding-top: 9px;
        }
        
        .instock
        {
            float: left;
            padding-left: 24px;
            padding-right: 0;
            padding-top: 9px;
        }
        
        .retailerlogo
        {
            float: left;
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 5px;
            margin-left: 0;
        }
        
        .retailerlogo1
        {
            float: left;
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 5px;
            margin-left: 0;
        }
        
        .buyitnow
        {
            float: left;
            padding-left: 0;
        }
        
        .buynow
        {
            float: left;
            padding-left: 23px;
            margin-top: 18px;
        }
        
        .OneBySevenBin2
        {
            width: 478px;
            height: 642px;
            float: left;
        }
        
        body
        {
            width: 478px;
            float: left;
        }
        
        .page
        {
            width: 478px;
            float: left;
        }
        
        #main
        {
            width: 478px;
           ...

JavaScript

$(document).ready(function () {

            $(function () {

                $('input:radio').hide().each(function () {

                    var label = $("label[for=" + '"' + this.id + '"' + "]").text();

                    $('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').insertAfter(this);

                });

                $('.radio-fx').on('click', function (e) {

                    $check = $(this).prev('input:radio');

                    var unique = '.' + this.className.split(' ')[1] + ' span';

                    $(unique).attr('class', 'radio');

                    $(this).find('span').attr('class', 'radio-checked');

                    $check.attr('checked', true);

                    var selValue = $('input[name=rbnNumber]:checked').val().split(",")[0];

                    var rpValue = $('input[name=rbnNumber]:checked').val().split(",")[1];

                    $('input[name=retailerProductId]').val(selValue);

                    $('span[class=actualPrice]').text(rpValue);
                    
                    

                }).on('keydown', function (e) {

                    if (e.which == 32) {

                        $(this).trigger('click');

                    }

                });

            });


            $(function () {

                $("input[name$='retailerGroup']").click(function () {

                    $(".radioOptions").attr(

         'disabled', 'disabled'

       );

                    $(".radioOptionsA").css("opacity", "0.3")

                    $(".radio-checked").css("opacity", "1")

                    $("#332527").css("opacity", "0.5")

                    $("#114578").css("opacity", "0.5")

                    $("#108660").css("opacity", "0.5")

                    $("#373455").css("opacity", "0.5")

                    var rpSelected = $("#retailerProductId").val();

                    $('#' + rpSelected).css("opacity", "1");

         ...