JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.js"></script>
<div class="ui basic segment">
    <div class="ui basic segment segment--nopadding center aligned">
        <img src="http://www.placehold.it/100x100" alt="" class="ui centered small circular image" />
         <h2 class="ui header">
                   Translations 
               </h2>

        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla</p>dropdown here</div>
    <div class="ui segment segment-nopadding">
         <h2 class="ui inline header">Select A View</h3> 
        <p> DropdownHERE >
        DropdownHere2</p>
       
    </div>
    
    <div class="ui text menu">
        <div class="item">        <h2 class="ui header">Dashboard > Learning Tracks</h2>

    </div>
    <div class="right menu"><a href="" class="right floated">Open in Browser</a>
    </div>
</div>
<table class="ui celled table">
    <thead>
        <tr>
            <th>Key</th>
            <th>English</th>
            <th>Translation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>view.key</td>
            <td>English meaning</td>
            <td>
                <textarea name="" placeholder="translate here" id="" cols="30" rows="10"></textarea>
                <br/> <a href="#">Save</a>  <a href="#">Edit</a>

            </td>
        </tr>
    </tbody>
</table>
<div class="ui text menu">
    <div class="item"><a href="">Save and Go to Next View</a>
    </div>
    <div class="item"><a href="">Save and Select Another</a>
    </div>
</div>
</div>

CSS

.ui.segment.segment--nopadding {
    padding: 0 !important
}