JSFiddle - React, Tailwind, and code Playground

by Scott_McGready

HTML

<fieldset class="variations">
    <div> <span class="select_label">Colour</span>

        <select id="colour-33" name="tax_colour-33">
            <option value="">Choose an option …</option>
            <option value="whitehigh-gloss-black1">White/High Gloss Black</option>
        </select>
    </div>
    <div>	<span class="select_label">Installation</span>

        <select id="installation-61" name="tax_installation-61">
            <option value="">Choose an option …</option>
            <option value="delivery-only2">Delivery only</option>
            <option value="installation-required1">Installation required</option>
        </select>
    </div>
</fieldset>

<!-- Initial state of single_variation is as follows. This changes as options are chosen and works well.

<div class="single_variation" style="display: none;"></div>
-->

<!-- this version of single_variation only displays if all options are chosen -->
<div class="single_variation" style="display: block;"><span class="price">£579.00</span><p class="stock ">In Stock</p></div>


<div class="boxthis" style="width: 100%; border: 1px solid black;">	<span id="disctext">
    <p>You need to choose some options first so that we can calculate your price.</p>
    </span>
</div>