JSFiddle - React, Tailwind, and code Playground

by manantwar

HTML

<select id="invoice_line_items_attributes_0_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="34" data-price="123.0">asdsad</option>
<option value="35" data-price="123213.0">asd</option>
</select>

<select id="invoice_line_items_attributes_1_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="31" data-price="1223.0">asdsad</option>
<option value="32" data-price="12333213.0">asd</option>
</select>

CSS

#container {
    width:500px;
}
.section {
    width:250px;
    height:250px;
    float:left;
    cursor:pointer;
}
.one {
    background:rgb(100, 100, 226);
}
.two {
    background:pink;
}
.three {
    background:gray;
}
.four {
    background:rgb(110, 162, 110);
}
.inner {
    width:250px;
    height:250px;
    float:left;
    cursor:pointer;
    background:orange;
}
.section:hover {
}

JavaScript

console.log( $('body')[0].outerHTML)