<!--sp tab area are start -->
<div class="single-product-tab-area">
    <div class="sp-tab-menu">
        <ul class="nav sp-tab" role="tablist">
            <li role="presentation"><a href="#description" class="active" aria-controls="description"
                    role="tab" data-bs-toggle="tab">Description</a></li>
            <li role="presentation"><a href="#reviews" aria-controls="reviews" role="tab"
                    data-bs-toggle="tab">Reviews(1)</a></li>
        </ul>
    </div>
    <div class="single-product-tab">
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade show active" id="description">
                <div class="sp-tab-text">
                    <div class="section-title as-tit roboto uppercase"> </div> <span>Lorem
                        ipsum dolor sit amet, consectetur adipiscing elit. Nam
                        fringilla augue nec est tristique auctor. Donec non est at
                        libero vulputate rutrum. Morbi ornare lectus quis justo gravida
                        semper. Nulla tellus mi, vulputate adipiscing cursus eu,
                        suscipit id nulla.</span> <span>Pellentesque aliquet, sem eget
                        laoreet ultrices, ipsum metus feugiat sem, quis fermentum
                        turpis eros eget velit. Donec ac tempus ante. Fusce ultricies
                        massa massa. Fusce aliquam, purus eget sagittis vulputate,
                        sapien libero hendrerit est, sed commodo augue nisi non neque.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                        tempor, lorem et placerat vestibulum, metus nisi posuere nisl,
                        in accumsan elit odio quis mi. Cras neque metus, consequat et
                        blandit et, luctus a nunc. Etiam gravida vehicula tellus, in
                        imperdiet ligula euismod eget.</span>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="reviews">
                <div class="sp-tab-text">
                    <div class="section-title as-tit roboto uppercase"> </div> <span>Morbi
                        ornare lectus quis justo gravida semper. Nulla tellus mi,
                        vulputate adipiscing cursus eu, suscipit id nulla.Lorem ipsum
                        dolor sit amet, consectetur adipiscing elit.
                        Nam fringilla augue nec est tristique auctor. Donec non est at
                        libero vulputate rutrum</span> <span>Pellentesque aliquet, sem
                        eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum
                        turpis eros eget velit.
                        Donec ac tempus ante. Fusce ultricies massa massa. Fusce
                        aliquam, purus eget sagittis vulputate, sapien libero hendrerit
                        est, sed commodo augue nisi non neque. Lorem ipsum dolor sit
                        amet, consectetur adipiscing elit. Sed tempor, lorem et
                        placerat vestibulum, metus nisi posuere nisl, in accumsan elit
                        odio quis mi. Cras neque metus, consequat et blandit et, luctus
                        a nunc. Etiam gravida vehicula tellus, in imperdiet ligula
                        euismod eget.</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--SP area are end -->
            
            

                
.sp-tab-text > span + span {
  display: block;
  margin-top: 20px;
}
.single-product-tab .tab-content {
  border: 1px solid #ccc;
  overflow: hidden;
  padding: 20px 30px;
}
.sp-tab-menu {
  float: left;
  position: relative;
  right: -1px;
  width: 25%;
}
.single-product-tab {
    float: left;
    width: 75%;
}
.nav.sp-tab li {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.nav.sp-tab li:last-child {
    border-bottom: 1px solid #ccc;
}
.nav.sp-tab li a {
  background: #fff none repeat scroll 0 0;
  height: 55px;
  line-height: 55px;
  padding: 0 15px;
}
.nav.sp-tab li.active {
  border-right: medium none;
}
                
            

                
<!--service idea area are start -->
<div class="idea-area">
    <div class="">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-12">
                <div class="idea-tab-menu">
                    <ul class="nav idea-tab" role="tablist">
                        <li role="presentation"><a href="#creativity" class="active show"
                                aria-controls="creativity" role="tab" data-bs-toggle="tab">Creativity</a></li>
                        <li role="presentation"><a href="#ideas" aria-controls="ideas"
                                role="tab" data-bs-toggle="tab">Ideas</a></li>
                        <li role="presentation"><a href="#design" aria-controls="design"
                                role="tab" data-bs-toggle="tab">Design</a></li>
                        <li role="presentation"><a href="#devlopment" aria-controls="devlopment"
                                role="tab" data-bs-toggle="tab">Devlopment</a></li>
                        <li role="presentation"><a href="#markenting" aria-controls="markenting"
                                role="tab" data-bs-toggle="tab">Markenting & SEO</a></li>
                        <li role="presentation"><a href="#frindly" aria-controls="frindly"
                                role="tab" data-bs-toggle="tab">Friendly Support</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-9 col-md-8 col-12">
                <div class="idea-tab-content">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade show active" id="creativity">
                            <div class="idea-tab-text">
                                <div class="section-title as-tit roboto uppercase">
                                    <h1>Ideas. Ideas. Ideas.</h1>
                                </div> <span>When you have a creative business and
                                    ideas generated from people working together, I
                                    think you can work happier together.</span> <span>Lorem
                                    ipsum dolor sit amet, consectetuer adipiscing elit,
                                    sed diam nonummy nibh euismod tincidunt ut laoreet
                                    dolore.</span> <span>Ut wisi enim ad minim veniam,
                                    quis nostrud exerci tation ullamcorper suscipit
                                    lobortis nisut aliquip exea commodo consequat velit
                                    molestie consequat, vel illum dolore eu feugiat
                                    nulla facilisis at vero eros</span>
                            </div>
                            <div class="idea-tab-img"> <img src="images/product/services-idea-icon.png"
                                    alt=""> </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="ideas">
                            <div class="idea-tab-text">
                                <div class="section-title as-tit roboto uppercase">
                                    <h1>Ideas. Ideas. Ideas.</h1>
                                </div> <span>When you have a creative business and
                                    ideas generated from people working together, I
                                    think you can work happier together.</span><span>Ut
                                    wisi enim ad minim veniam, quis nostrud exerci
                                    tation ullamcorper suscipit lobortis nisut aliquip
                                    exea commodo consequat velit molestie consequat,
                                    vel illum dolore eu feugiat nulla facilisis at vero
                                    eros</span> <span>Lorem ipsum dolor sit amet,
                                    consectetuer adipiscing elit, sed diam nonummy nibh
                                    euismod tincidunt ut laoreet dolore magna aliquam
                                    erat volutpat.</span>
                            </div>
                            <div class="idea-tab-img"> <img src="images/product/services-idea-icon.png"
                                    alt=""> </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="design">
                            <div class="idea-tab-text">
                                <div class="section-title as-tit roboto uppercase">
                                    <h1>Ideas. Ideas. Ideas.</h1>
                                </div> <span>When you have a creative business and
                                    ideas generated from people working together, I
                                    think you can work happier together.</span> <span>Lorem
                                    ipsum dolor sit amet, consectetuer adipiscing elit,
                                    sed diam nonummy nibh euismod tincidunt ut laoreet
                                    dolore magna aliquam erat volutpat.</span> <span>Ut
                                    wisi enim ad minim veniam, quis nostrud exerci
                                    tation ullamcorper suscipit lobortis nisut aliquip
                                    exea commodo consequat velit molestie consequat,
                                    vel illum dolore eu feugiat nulla facilisis at vero
                                    eros</span>
                            </div>
                            <div class="idea-tab-img"> <img src="images/product/services-idea-icon.png"
                                    alt=""> </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="devlopment">
                            <div class="idea-tab-text">
                                <div class="section-title as-tit roboto uppercase">
                                    <h1>Ideas. Ideas. Ideas.</h1>
                                </div> <span>When you have a creative business and
                                    ideas generated from people working together, I
                                    think you can work happier together.</span><span>Ut
                                    wisi enim ad minim veniam, quis nostrud exerci
                                    tation ullamcorper suscipit lobortis nisut aliquip
                                    exea commodo consequat velit molestie consequat,
                                    vel illum dolore eu feugiat nulla facilisis at vero
                                    eros</span> <span>Lorem ipsum dolor sit amet,
                                    consectetuer adipiscing elit, sed diam nonummy nibh
                                    euismod tincidunt ut laoreet dolore magna aliquam
                                    erat volutpat.</span>
                            </div>
                            <div class="idea-tab-img"> <img src="images/product/services-idea-icon.png"
                                    alt=""> </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="markenting">
                            <div class="idea-tab-text">
                                <div class="section-title as-tit roboto uppercase">
                                    <h1>Ideas. Ideas. Ideas.</h1>
                                </div> <span>When you have a creative business and
                                    ideas generated from people working together, I
                                    think you can work happier together.</span> <span>Lorem
                                    ipsum dolor sit amet, consectetuer adipiscing elit,
                                    sed diam nonummy nibh euismod tincidunt ut laoreet
                                    dolore magna aliquam erat volutpat.</span> <span>Ut
                                    wisi enim ad minim veniam, quis nostrud exerci
                                    tation ullamcorper suscipit lobortis nisut aliquip
                                    exea commodo consequat velit molestie consequat,
                                    vel illum dolore eu feugiat nulla facilisis at vero
                                    eros</span>
                            </div>
                            <div class="idea-tab-img"> <img src="images/product/services-idea-icon.png"
                                    alt=""> </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="frindly">
                            <div class="idea-tab-text">
                                <div class="section-title as-tit roboto uppercase">
                                    <h1>Ideas. Ideas. Ideas.</h1>
                                </div> <span>When you have a creative business and
                                    ideas generated from people working together, I
                                    think you can work happier together.</span> <span>Ut
                                    wisi enim ad minim veniam, quis nostrud exerci
                                    tation ullamcorper suscipit lobortis nisut aliquip
                                    exea commodo consequat velit molestie consequat,
                                    vel illum dolore eu feugiat nulla facilisis at vero
                                    eros</span> <span>Lorem ipsum dolor sit amet,
                                    consectetuer adipiscing elit, sed diam nonummy nibh
                                    euismod tincidunt ut laoreet dolore magna aliquam
                                    erat volutpat.</span>
                            </div>
                            <div class="idea-tab-img"> <img src="images/product/services-idea-icon.png"
                                    alt=""> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--service idea area are end -->
            
            

                
.idea-tab-text {
    float: left;
    width: 50%;
}
.idea-tab-img {
    float: left;
    text-align: center;
    width: 50%;
}
.idea-tab-text > span {
    display: block;
    letter-spacing: 0.8px;
    margin-bottom: 25px;
}
.idea-tab-text > span:last-child {
    margin-bottom: 0;
}
.idea-tab-menu ul li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-radius: 0;
  color: #2b2e33;
  font-family: Roboto Slab,Arial,Helvetica,sans-serif;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0.5px;
  line-height: 35px;
}
.idea-tab-menu ul li:last-child{
  border-bottom: 1px solid #e5e5e5;
}
.idea-tab-menu ul li {
  height: 55px;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}

.idea-tab-menu ul li:hover a,.idea-tab-menu ul li.active a {
  background: #2395ec none repeat scroll 0 0;
  color: #ffffff;
}
                
            

                
<div class="shop-shadow2 mtb-30">
    <div class="product-area ptb-20">
        <div class="title-tab-product-category">
            <div class="col-lg-12 text-center">
                <ul class="nav mb-40" role="tablist">
                    <li role="presentation"><a href="#newarrival" class="active"
                            aria-controls="newarrival" role="tab" data-bs-toggle="tab">New
                            Arrival</a></li>
                    <li role="presentation"><a href="#bestsellr" aria-controls="bestsellr"
                            role="tab" data-bs-toggle="tab">Best Seller</a></li>
                    <li role="presentation"><a href="#specialoffer" aria-controls="specialoffer"
                            role="tab" data-bs-toggle="tab">Special Offer</a></li>
                </ul>
            </div>
        </div>
        <div class="content-tab-product-category col-12">
            <!-- Tab panes -->
            <div class="tab-content tab-carsl">
                <div role="tabpanel" class="tab-pane fade show active" id="newarrival">
                    <div class="sp-tab-text">
                        <span>Lorem ipsum it amet, consectetur adipiscing elit. Nam
                            fringilla augue nec est tristique auctor. Donec non est at
                            libero vulputate rutrum. Morbi ornare lectus quis justo
                            gravida semper. Nulla tellus mi, vulputate adipiscing
                            cursus eu, suscipit id nulla.</span> <span>Pellentesque
                            aliquet, sem eget laoreet ultrices, ipsum metus feugiat
                            sem, quis fermentum turpis eros eget velit. Donec ac tempus
                            ante. Fusce ultricies massa massa. Fusce aliquam, purus
                            eget sagittis vulputate, sapien libero hendrerit est, sed
                            commodo augue nisi non neque. Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit. Sed tempor, lorem et placerat
                            vestibulum, metus nisi posuere nisl, in accumsan elit odio
                            quis mi. tiam gravida vehicula tellus, in imperdiet ligula
                            euismod eget.</span> </div>
                </div>
                <div role="tabpanel" class="tab-pane  fade" id="bestsellr">
                    <div class="sp-tab-text">
                        <span>Consectetur adipiscing elit. Nam fringilla augue nec est
                            tristique auctor. Donec non est at libero vulputate rutrum.
                            Morbi ornare lectus quis justo gravida semper. Nulla tellus
                            mi, vulputate adipiscing cursus eu, suscipit id nulla.</span>
                        <span>Pellentesque aliquet, sem eget laoreet ultrices, ipsum
                            metus feugiat sem, quis fermentum turpis eros eget velit.
                            Donec ac tempus ante. Fusce ultricies massa massa. Fusce
                            aliquam, purus eget sagittis vulputate, sapien libero
                            hendrerit est, sed commodo augue nisi non neque. Lorem
                            ipsum dolor sit amet, consectetur adipiscing elit. Sed
                            tempor, lorem et placerat vestibulum, metus nisi posuere
                            nisl, in accumsan elit odio quis mi. Cras neque metus,
                            consequat et blandit et, luctus a nunc. Etiam gravida
                            vehicula tellus, in imperdiet ligula euismod eget.</span>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane  fade" id="specialoffer">
                    <div class="sp-tab-text">
                        <span>Adipiscing elit. Nam fringilla augue nec est tristique
                            auctor. Donec non est at libero vulputate rutrum. Morbi
                            ornare lectus quis justo gravida semper. Nulla tellus mi,
                            vulputate adipiscing cursus eu, suscipit id nulla.</span>
                        <span>Pellentesque aliquet, sem eget laoreet ultrices, ipsum
                            metus feugiat sem, quiseros eget velit. Donec ac tempus
                            ante. Fusce ultricies massa massa. Fusce aliquam, purus
                            eget sagittis vulputate, sapien libero hendrerit est, sed
                            commodo augue nisi non neque. Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit. Sed tempor, lorem et placerat
                            vestibulum, metus nisi posuere nisl, in accumsan elit odio
                            quis mi. Cras neque metus, consequat et blandit et, luctus
                            a nunc. Etiam gravida vehicula tellus, in imperdiet ligula
                            euismod eget.</span> </div>

                </div>
            </div>
        </div>
    </div>
</div>
            
            

                
.title-tab-product-category li a:hover::after, .title-tab-product-category li.active a::after {
  border-top: 6px solid #2395ec;
}
.title-tab-product-category li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 3px;
  padding: 0;
}
.title-tab-product-category li a::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid transparent;
  bottom: -6px;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  transform: none;
}
.title-tab-product-category li a:hover, .title-tab-product-category li.active a{
  background: #2395ec none repeat scroll 0 0;
  color: #ffffff;
}
.title-tab-product-category li a {
  background: #ececec none repeat scroll 0 0;
  border-radius: 3px;
  color: #232527;
  display: inline-block;
  font-family: Raleway,Arial,Helvetica,sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 18px;
  position: relative;
  text-transform: uppercase;
  transition: all 0.15s ease 0s;
}
.single-product:last-child {
  margin-bottom: 0;
}

.tab-content.tab-carsl> .tab-pane {
  display: block;
  height: 0;
  opacity: 0;
}
.tab-content.tab-carsl > .tab-pane.active {
  height: auto;
  opacity: 1;
}