JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

<div class="course_view">
    <div class='course_section'>
        <ul class="add_courses">
            <h4 class='lato-bold'>Courses</h4>
            <li ng-click="tabSelect('ALL')">
                <a class='center' ng-class="{'active' :selectedTabName === 'courseOffered'}">Course Details</a>
                <span class="divider_icon">
          <img src="images/icon-divider.svg">
        </span>
            </li>
            <li ng-click="tabSelect('COURSE_CURRICULUM')">
                <a class='center' ng-class="{'active' :CourseCurriculum}"> Course Curriculum</a>
                <span class="divider_icon">
          <img src="images/icon-divider.svg">
        </span>
            </li>
            <li ng-click="tabSelect('COURSE_SCHEDULE')">
                <a class='center' ng-class="{'active' :courseSchedule}">Course Schedule</a>
                <span class="divider_icon">
          <img src="images/icon-divider.svg">
        </span>
            </li>
            <li ng-click="tabSelect('REGITERED_CANDIDATES')">
                <a class='center' ng-class="{'active' :registered}">Registered Candidates</a>
            </li>
        </ul>
        <div class='course-right-side'>

        </div>
        <div class='clear'></div>
    </div>
    <div class='details' ng-show="selectedTabName ==='courseOffered'">
        <div class='basic-details'>
            <div class='panel_details'>
                <div class='item3'>
                    <div class='img'></div>
                </div>
                <div class='title-name'>
                    <h4>Basic Details</h4>
                    <div class='course-name'>
                        <div class='img java-img'></div>
                        <div class='course-title'>
                            <h5>Java Course-Online</h5>
                            <button>OOPS</button>
                            <button>Inheritence</button>
                            <button>Polymorphism</button>
                          ...