<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
<section class="py-5 bg-gray">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-2 p-0">
<ul class="nav flex-column nav-tabs nav-tabs-vertical bg-gray-2 border-0 p-0" id="tabVertical" role="tablist">
<li class="nav-item">
<a class="nav-link text-color-dark p-3 active" id="vertical-general-tab" data-toggle="tab" href="#vertical-general" role="tab" aria-controls="vertical-portfolio" aria-expanded="true">قوانین</a>
</li>
<li class="nav-item">
<a class="nav-link text-color-dark p-3" id="vertical-website-tab" data-toggle="tab" href="#vertical-website" role="tab" aria-controls="vertical-website">وب سایت</a>
</li>
<li class="nav-item">
<a class="nav-link text-color-dark p-3" id="vertical-profile-tab" data-toggle="tab" href="#vertical-profile" role="tab" aria-controls="vertical-profile">پروفایل</a>
</li>
<li class="nav-item">
<a class="nav-link text-color-dark p-3" id="vertical-Processors-tab" data-toggle="tab" href="#vertical-Processors" role="tab" aria-controls="vertical-Processors">پردازنده</a>
</li>
<li class="nav-item">
<a class="nav-link text-color-dark p-3" id="vertical-Measures-tab" data-toggle="tab" href="#vertical-Measures" role="tab" aria-controls="vertical-Measures">محیط سازمان</a>
</li>
</ul>
</div>
<div class="col-md-8 bg-white max-height-300">
<div class="tab-content mt-2" id="tabVerticalContent">
<div class="tab-pane fade pb-4 show active" id="vertical-general" role="tabpanel" aria-labelledby="vertical-general-tab">
<h5 class="text-center mt-3 mb-2">عنوان اصلی</h5>
<hr class="tall" />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>
<p class="mb-0">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
</div>
<div class="tab-pane fade pb-4" id="vertical-website" role="tabpanel" aria-labelledby="vertical-website-tab">
<h5 class="text-center mt-3 mb-2">عنوان اصلی</h5>
<hr class="tall" />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>
<p class="mb-0">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
</div>
<div class="tab-pane fade pb-4" id="vertical-profile" role="tabpanel" aria-labelledby="vertical-profile-tab">
<h5 class="text-center mt-3 mb-2">عنوان اصلی</h5>
<hr class="tall" />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>
<p class="mb-0">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
</div>
<div class="tab-pane fade pb-4" id="vertical-Processors" role="tabpanel" aria-labelledby="vertical-Processors-tab">
<h5 class="text-center mt-3 mb-2">عنوان اصلی</h5>
<hr class="tall" />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>
<p class="mb-0">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
</div>
<div class="tab-pane fade pb-4" id="vertical-Measures" role="tabpanel" aria-labelledby="vertical-Measures-tab">
<h5 class="text-center mt-3 mb-2">عنوان اصلی</h5>
<hr class="tall" />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
</p>
<p class="mb-0">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
