- اجزاء
- اشیاء رسانه
ساده
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- simple -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
سفارش
نمونه کدسرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- order -->
<div class="flex">
<div class="flex-1 ltr:mr-4 rtl:ml-4">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
<div>
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
</div>
رسانه با تراز بالا
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- top-aligned media -->
<div class="flex items-start">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
</div>
</div>
رسانه با تراز وسط
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- center aligned media -->
<div class="flex items-center">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
</div>
</div>
رسانه با تراز پایین
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- bottom aligned media -->
<div class="flex items-end">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
</div>
</div>
تراز راست
نمونه کدسرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- right aligned -->
<div class="flex">
<div class="flex-1 ltr:mr-4 rtl:ml-4 ltr:text-right rtl:text-left">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
</div>
<div>
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
</div>
لیست رسانه
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- list -->
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
تو در تو
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- nesting -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text mb-5"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
</div>
</div>
متن علامت گذاری
نمونه کد
<!-- notation text -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text mb-4"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
<ul class="flex space-x-4 rtl:space-x-reverse font-bold">
<li><a href="javascript:;" class="hover:text-primary">Reply</a></li>
<li><a href="javascript:;" class="hover:text-primary">Edit</a></li>
<li><a href="javascript:;" class="hover:text-primary">Delete</a></li>
</ul>
</div>
</div>
آیکن علامت گذاری شده
نمونه کد
<!-- notation icon -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text mb-4"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
<ul class="flex space-x-4 rtl:space-x-reverse font-bold">
<li><a href="javascript:;" class="flex items-center hover:text-primary">
<svg> ... </svg> Reply
</a>
</li>
<li><a href="javascript:;" class="flex items-center hover:text-primary">
<svg> ... </svg> Edit
</a>
</li>
<li><a href="javascript:;" class="flex items-center hover:text-primary">
<svg> ... </svg> Delete
</a>
</li>
</ul>
</div>
</div>
نشان
نمونه کد
سرفصل طراح وب
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- badge -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading <span class="badge bg-primary ltr:float-right rtl:float-left">Web Designer</span></h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
لیست کشویی
نمونه کد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- dropdown -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<div class="flex justify-between mb-2">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<div class="relative">
<a href="javascript:;" @click="toggle">
<svg> ... </svg>
</a>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 top-full">
<li><a href="javascript:;">
<svg> ... </svg> Start chat</a></li>
<li><a href="javascript:;">
<svg> ... </svg> Make a call</a></li>
<li><a href="javascript:;">
<svg> ... </svg> Statistics</a></li>
</ul>
</div>
</div>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
برچسب ها
نمونه کدسرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- error -->
<div class="flex items-center mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
<!-- warning -->
<div class="flex items-center">
<div class="ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
چک باکس
نمونه کدسرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- checkbox -->
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<input type="checkbox" class="form-checkbox mt-1.5" checked />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<input type="checkbox" class="form-checkbox mt-1.5" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
رادیو
نمونه کدسرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
سرفصل
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
<!-- radio -->
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<input type="radio" class="form-radio mt-1.5" name="radio" checked />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<input type="radio" class="form-radio mt-1.5" name="radio" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. </p>
</div>
</div>