JSFiddle - React, Tailwind, and code Playground

by hojondo

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">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="list-group" id="myList" role="tablist">
        <a class="list-group-item list-group-item-action" href="#home" >Home</a>
        <a class="list-group-item list-group-item-action" href="#profile" >Profile</a>
        <a class="list-group-item list-group-item-action" href="#messages" >Messages</a>
        <a class="list-group-item list-group-item-action" href="#settings" >Settings</a>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane" id="home" >..1.</div>
        <div class="tab-pane" id="profile" >..2.</div>
        <div class="tab-pane" id="messages" >..3.</div>
        <div class="tab-pane" id="settings" >.4..</div>
    </div>

JavaScript

$('#myList a').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    });
    $('#myList a[href="#profile"]').tab('show') // Select tab by name