JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<div class="ui raised very padded text container segment">
<div class="ui orange progress" data-percent="75" id="example1">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
</div>
<div class="ui raised very padded text container segment">
<div class="ui segment">
<div class="ui top attached teal progress" data-percent="30" id="example2">
<div class="bar"></div>
</div>
<h4>Plugins and Frameworks for your next Ruby on Rails project</h4>
<p>
For web development projects, you must have experienced using different open sourced plugins and frontend frameworks. While Ruby on Rails is always my primary choice of web framework, you also need a frontend framework to cater your responsive HTML layout and standard components.
</p>
<div class="ui bottom attached teal progress" data-percent="30" id="example4">
<div class="bar"></div>
</div>
</div>
</div>
<div class="ui raised very padded text container segment">
<div class="ui card">
<div class="image">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Project</a>
<div class="meta">
<span class="date">Started in 2014</span>
</div>
<div class="meta">
<span class="date">Completed 50%</span>
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
<div class="ui bottom attached red progress" data-percent="50" id="example3">
<div...
JavaScript
$('#example1').progress();
$('#example2').progress();
$('#example3').progress();
$('#example4').progress();