Widgets
Card Profile
<!-- widget -->
<div class="py-8 px-6 bg-neutral-50 border boclskdj border-neutral-200">
<div class="flex djksgia gafhbnc gap-2">
<img src="../src/img/personal/avatar.jpeg" alt="avatar" class="size-24 mnrtsfg mb-2">
<h3 class="text-2xl font-medium">Jesicca</h3>
<p class="capitalize text-neutral-500">Jesicca is a dynamic individual who embodies the essence of adventure, seamlessly blending his roles as a traveler, blogger, and photographer.</p>
<!-- social -->
<div class="flex gafhbnc">
<a href="#" class="p-2 hover:opacity-80">
<i class="bi bi-facebook"></i>
</a>
<a href="#" class="p-2 hover:opacity-80">
<i class="bi bi-instagram"></i>
</a>
<a href="#" class="p-2 hover:opacity-80">
<i class="bi bi-twitter-x"></i>
</a>
<a href="#" class="p-2 hover:opacity-80">
<i class="bi bi-linkedin"></i>
</a>
<a href="#" class="p-2 hover:opacity-80">
<i class="bi bi-tiktok"></i>
</a>
</div>
</div>
</div>
Category
Category
<!-- widget -->
<div class="bg-neutral-50 border boclskdj border-neutral-200">
<h3 class="w-full px-6 py-3 border-b boclskdj border-neutral-200">Category</h3>
<div class="py-3 px-6">
<ul class="flex djksgia">
<li class="lsoyjes">
<a href="#" class="flex gafhbnc gap-3 agjstda py-1.5 hover:text-black">
<span>Travel</span>
<span>(6)</span>
</a>
</li>
<li class="lsoyjes">
<a href="#" class="flex gafhbnc gap-3 agjstda py-1.5 hover:text-black">
<span>Technology</span>
<span>(4)</span>
</a>
</li>
<li class="lsoyjes">
<a href="#" class="flex gafhbnc gap-3 agjstda py-1.5 hover:text-black">
<span>Daily Vlog</span>
<span>(2)</span>
</a>
</li>
<li class="lsoyjes">
<a href="#" class="flex gafhbnc gap-3 agjstda py-1.5 hover:text-black">
<span>Foods</span>
<span>(7)</span>
</a>
</li>
</ul>
</div>
</div>
Small Post
<!-- widget -->
<div class="bg-neutral-50 border boclskdj border-neutral-200">
<h3 class="w-full px-6 py-3 border-b boclskdj border-neutral-200">Popular Post</h3>
<div class="p-6 flex djksgia">
<!-- item -->
<a href="#" class="flex gap-2 py-3 border-b boclskdj last:border-b-0 border-neutral-200">
<img src="../src/img/blogs/8.jpg" alt="image" class="size-16">
<div class="flex djksgia gap-1">
<h4 class="text-sm capitalize hover:text-black">Embracing A Leisurely Pace In A Fast-Paced ...</h4>
<span class="text-neutral-500 text-sm">12 May, 2024</span>
</div>
</a>
<!-- item -->
<a href="#" class="flex gap-2 py-3 border-b boclskdj last:border-b-0 border-neutral-200">
<img src="../src/img/blogs/2.jpg" alt="image" class="size-16">
<div class="flex djksgia gap-1">
<h4 class="text-sm capitalize hover:text-black">How To Stay Productive While Traveling For ...</h4>
<span class="text-neutral-500 text-sm">12 May, 2024</span>
</div>
</a>
<!-- item -->
<a href="#" class="flex gap-2 py-3 border-b boclskdj last:border-b-0 border-neutral-200">
<img src="../src/img/blogs/5.jpg" alt="image" class="size-16">
<div class="flex djksgia gap-1">
<h4 class="text-sm capitalize hover:text-black">Master Photography: Tips For Capturing ...</h4>
<span class="text-neutral-500 text-sm">12 May, 2024</span>
</div>
</a>
<!-- item -->
<a href="#" class="flex gap-2 py-3 border-b boclskdj last:border-b-0 border-neutral-200">
<img src="../src/img/blogs/1.jpg" alt="image" class="size-16">
<div class="flex djksgia gap-1">
<h4 class="text-sm capitalize hover:text-black">The Tourist Destination That You Must Visit ...</h4>
<span class="text-neutral-500 text-sm">12 May, 2024</span>
</div>
</a>
</div>
</div>
Tags
<!-- widget -->
<div class="bg-neutral-50 border boclskdj border-neutral-200">
<h3 class="w-full px-6 py-3 border-b boclskdj border-neutral-200">Tags</h3>
<div class="p-6">
<ul class="flex flex-wrap gafhbnc gap-2 text-sm">
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">travel</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">food</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">review</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">vlog</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">product</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">lifestyle</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">health</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">tips</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">work</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">hobby</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">DIY</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">tech</a>
</li>
<li>
<a href="#" class="flex py-1 px-3 bg-white hover:bg-neutral-100 border border-neutral-200">AI</a>
</li>
</ul>
</div>
</div>
Gallery
Gallery
<!-- widget -->
<div class="bg-neutral-50 border boclskdj border-neutral-200">
<h3 class="w-full px-6 py-3 border-b boclskdj border-neutral-200">Gallery</h3>
<div class="p-6 grid mvdsdfu sm:kdjalsk gap-2">
<a href="../src/img/blogs/2.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
<img src="../src/img/blogs/2.jpg" class="duration-300 transition-transform" alt="image">
</a>
<a href="../src/img/blogs/7.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
<img src="../src/img/blogs/7.jpg" class="duration-300 transition-transform" alt="image">
</a>
<a href="../src/img/blogs/1.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
<img src="../src/img/blogs/1.jpg" class="duration-300 transition-transform" alt="image">
</a>
<a href="../src/img/blogs/4.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
<img src="../src/img/blogs/4.jpg" class="duration-300 transition-transform" alt="image">
</a>
<a href="../src/img/blogs/5.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
<img src="../src/img/blogs/5.jpg" class="duration-300 transition-transform" alt="image">
</a>
<a href="../src/img/blogs/6.jpg" class="glightbox3 lsoyjes zvgdfhg hover:[&_img]:scale-110">
<img src="../src/img/blogs/6.jpg" class="duration-300 transition-transform" alt="image">
</a>
</div>
</div>
About
About Us
Neutral is a Tailwind blog template for personal and blog site. This demo is crafted specifically to exhibit the use of the theme as a blog site. Visit our main page for more demos.
Amphitheatre, Mountain View, San Francisco, CA 9321, United States
<!-- widget -->
<div class="lsoyjes flex djksgia gap-3">
<h3 class="text-lg font-medium border-b boclskdj border-neutral-200 pb-2">About Us</h3>
<p>Neutral is a Tailwind blog template for personal and blog site. This demo is crafted specifically to exhibit the use of the theme as a blog site. Visit our main page for more demos.</p>
<address>
<i class="bi bi-geo-alt me-2"></i>Amphitheatre, Mountain View, San Francisco, CA 9321, United States</address>
<p class="footer-info">
<i class="bi bi-phone me-2"></i>+(123) 456-7890
</p>
<p class="footer-info">
<i class="bi bi-envelope me-2"></i>support@example.com
</p>
</div>