JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui four cards">
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="4"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="2"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="3"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="4"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="3"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="3"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
Rating:
<div class="ui star rating" data-rating="4"></div>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="extra">
...
JavaScript
$('.ui.four.cards').sortable({
});