JSFiddle - React, Tailwind, and code Playground
by shriek
HTML
<li id="Standards" class="standards clear">
<div class="clear">
<h2 class="title clear">Standards <a href="#" class="view-all"><g:message code="featurecards.standards.viewall.text"/></a></h2>
<article class="listed">
<nav class="card-header clear">
<ul class="standards-links clear">
<li><a href="#">New Configuration</a></li>
<li><a href="#">New Configuration 2 with a longer name Lorem Ipsum est dolor nim, u` speaki?</a></li>
<li><a href="#" class="selected">Petrox Configuration</a></li>
<li><a href="#">Petrox Laptops</a></li>
<li><a href="#">Petrox Mobile</a></li>
<li><a href="#">Petrox Tablets</a></li>
<li><a href="#">Petrox Hardware</a></li>
<li><a href="#">Petrox Software</a></li>
<li class="standards-gradient-left">
<a href="#" class="prev">Prev</a>
</li>
<li class="standards-gradient-right">
<a href="#" class="next">Next</a>
</li>
</ul>
<div class="arrow-container follower">
<span class="arrow-down-gray"></span>
<span class="arrow-down-white"></span>
</div>
</nav>
<table>
<thead>
<tr>
<th>Petrox Configuration <span>(12)</span></th>
<th class="table-price"></th>
<th class="table-buttons"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<g:img dir="images" file="computer01.png" alt="Product" />
<a href="#">This is a long product description <span>(77777777)</span></a>
</td>
<td class="align-right">
<span>USD</span>
<b>227.00</b>
</td>
<td>
<input type="button" class="secondary" value="Configure" />
<input type="button" class="primary"...