JSFiddle - React, Tailwind, and code Playground

by dynamyc

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
<div class="row">
    <div class="fruits col-md-8">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-content1" role="tab" aria-controls="nav-content1" aria-selected="true">Content 1</a>
                <a class="nav-item nav-link" id="nav-content2-tab" data-toggle="tab" href="#nav-content2" role="tab" aria-controls="nav-content2" aria-selected="false">Content 2</a>
            </div>
        </nav>

        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-content1" role="tabpanel" aria-labelledby="nav-content1-tab">
                <div class="row">
                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                </div>




                <div class="tab-pane fade" id="nav-content2" role="tabpanel" aria-labelledby="nav-content2-tab">...</div>
            </div>
        </div>




    </div>

    <div class="fruits-news col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}