JSFiddle - React, Tailwind, and code Playground

by Kiwiupover

HTML

<link rel="stylesheet" href="http://u3065104.fsdata.se/wplove/wp-content/themes/butikpaletti/css/app.css">
<link rel="stylesheet" href="http://u3065104.fsdata.se/wplove/wp-content/themes/butikpaletti/css/main.css">
<body>
<div class="products-list-container">
<div class="row">
    <div class="product small-6 large-3 columns">
		<div class="img-wrapper"><img width="150" height="150" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Bodybutter-Cocos.jpg" class="attachment-shop_catalog wp-post-image" alt="Bodybutter Cocos"></div>
		<h3>#1 When first columns is higher then the one to the right. There is a big bug happening. This is by all means not good at all. This makes me this grid to fail for many cases. Am I missing something obvious?</h3>
	<span class="price"><span class="amount">115kr</span></span>
</div> <!-- .product end -->
					
				
<!-- .product start -->
<div class="product small-6 large-3 columns">
		<div class="img-wrapper"><img width="110" height="200" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/Lavera-Solskydd.jpg" class="attachment-shop_catalog wp-post-image" alt="Lavera Solskydd"></div>
		<h3>#2 If this would be having higher height than the one to the left - no problem</h3>
		

	<span class="price"><span class="amount">210kr</span></span>
</div> <!-- .product end -->


					
						
<!-- .product start -->
<div class="product small-6 large-3 columns">

		<div class="img-wrapper"><img width="336" height="506" src="http://u3065104.fsdata.se/wplove/wp-content/uploads/CottonButton-nattlinne-cherry-336x506.jpg" class="attachment-shop_catalog wp-post-image" alt="Cotton&amp;Button nattlinne cherry"></div>
		<h3>#3&nbsp;Ekologiskt nattlinne cotton &amp; button</h3>
		
	<span class="price"><span class="amount">375kr</span></span>
</div> <!-- .product end -->
		
						
<!-- .product start -->
<div class="product small-6 large-3 columns">
		<div class="img-wrapper"><img width="400" height="400"...