JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<div id="WinePriceBox">
    
    <form enctype="multipart/form-data" onsubmit="return check_add_to_cart(this, false)" action="http://iwinebeta/cart.php" method="post">
        <input type="hidden" value="add" name="action">
        <input type="hidden" value="60" name="product_id">
        <input type="hidden" value="" class="CartVariationId" name="variation_id">
        <input type="hidden" value="" name="currency_id">
        <ul class="ProductAddToCart">
            <li class="retail"></li>
            <li class="price">
                <span class="AddToCartHeader">販売価格:</span>
                ￥1,100
            </li>
            <li class="point"><span class="AddToCartHeader">ポイント:</span>11</li>
            <li class="save"></li>
            <li style="" class="qty">
                <span class="AddToCartHeader">数量:</span>
                <select onchange="" id="qty_" name="qty[]" class="Field45 quantityInput">
                    <option selected="selected" value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="24">24</option>
                    <option value="36">36</option>
                </select>
            </li>
            <li style="" class="AddCartButton">
                <input type="image" alt="カートに追加" src="/templates/Furniture/images/ecru/jp/AddCartButton.gif" id="AddCartButton2">
            </li>
        </ul>
    </form>
    
    
    <script type="text/javascript">
        lang.OptionMessage = "";
      ...

CSS

#WinePriceBox .AvailabilityNotice .AvailabilityNoticeRed { color:#cc0000; }
#WinePriceBox .ProductAddToCart .price {color:#cc0000;font-weight:bold;font-size:14px;}
#WinePriceBox .ProductAddToCart .retail { color:#444444; }
#WinePriceBox .ProductAddToCart .price span, 
#WinePriceBox .ProductAddToCart .retail span { display:block; }
#WinePriceBox .ProductAddToCart .price, 
#WinePriceBox .ProductAddToCart .retail { margin:0 0 5px; }
#WinePriceBox .ProductAddToCart .qty { margin:5px 0; }
#WinePriceBox .ProductAddToCart .pointicon span {background:url("https://www.iwine.jp/templates/Summer2010/images/icons/point/thumb.png") no-repeat right center;padding-right:25px;}
#WinePriceBox .ProductAddToCart .pointicon {line-height:20px;font-size:14px;font-size:20px;font-weight:bold;color:#cc0000;margin-top:5px;}
#WinePriceBox .ProductAddToCart {list-style:none;width:105px;margin:0 0 0 15px;}
#WinePriceBox .ProductAddToCart1 li .AddToCartHeader {width:60px;display:block;float:left;padding:0 3px 0 0px;text-align:right;}
#WinePriceBox .ProductAddToCart1 li {margin:0 0 3px;width:120px;color:#333333;}
#WinePriceBox .ProductAddToCart1 .point {color:#666666;font-weight:bold;}
#WinePriceBox .ProductAddToCart1 .retail { border:0; }
#WinePriceBox .ProductAddToCart1 .price {color:#cc0000;font-weight:bold;font-size:14px;}
#WinePriceBox .ProductAddToCart1 .save { border:0; }
#WinePriceBox .ProductAddToCart1 .qty .AddToCartHeader { text-align:center; }
#WinePriceBox .ProductAddToCart1 .qty select { font-size:10px; }
#WinePriceBox .ProductAddToCart1 .qty {font-weight:bold;line-height:22px;}
#WinePriceBox .ProductAddToCart1 .AddCartButton {text-align:center;margin:0;}
#WinePriceBox .ProductAddToCart1 { list-style:none; }
#WinePriceBox {background:#ffdd66;border:4px solid #f9f3d4;padding:5px 0;}