Blog Components in Vista library

Blog from Vista

<section class="bg-darkPink-900 py-24" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
    <div class="container mx-auto px-4">
        <div class="mb-20 relative">
            <div class="absolute bottom-0 left-0 w-full bg-white bg-opacity-10 h-px"></div>
            <div class="overflow-x-auto">
                <div class="flex items-center justify-between gap-12">
                    <div class="flex gap-10">
                        <a href="#" x-ref="tab1" class="inline-block pb-4 border-b-2 border-pink-500 hover:border-pink-500 text-pink-500 hover:text-pink-500 font-semibold transition duration-200" :class="{'border-pink-500 text-pink-500 font-semibold': $refs.tab1.textContent == tab, 'border-transparent text-gray-400': $refs.tab1.textContent != tab}" x-on:click.prevent="tab = $refs.tab1.textContent">Trending</a>
                        <a href="#" x-ref="tab2" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 text-gray-400 hover:text-pink-500 transition duration-200" :class="{'border-pink-500 text-pink-500 font-semibold': $refs.tab2.textContent == tab, 'border-transparent text-gray-400': $refs.tab2.textContent != tab}" x-on:click.prevent="tab = $refs.tab2.textContent">Accounting</a>
                        <a href="#" x-ref="tab3" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 text-gray-400 hover:text-pink-500 transition duration-200" :class="{'border-pink-500 text-pink-500 font-semibold': $refs.tab3.textContent == tab, 'border-transparent text-gray-400': $refs.tab3.textContent != tab}" x-on:click.prevent="tab = $refs.tab3.textContent">Entrepreneurship</a>
                        <a href="#" x-ref="tab4" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 text-gray-400 hover:text-pink-500 transition duration-200" :class="{'border-pink-500 text-pink-500 font-semibold': $refs.tab4.textContent == tab, 'border-transparent text-gray-400': $refs.tab4.textContent != tab}" x-on:click.prevent="tab = $refs.tab4.textContent">Payments</a>
                        <a href="#" x-ref="tab5" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 text-gray-400 hover:text-pink-500 transition duration-200" :class="{'border-pink-500 text-pink-500 font-semibold': $refs.tab5.textContent == tab, 'border-transparent text-gray-400': $refs.tab5.textContent != tab}" x-on:click.prevent="tab = $refs.tab5.textContent">Company</a>
                    </div>
                    <a href="#" class="inline-flex items-center gap-4 pb-4 text-gray-500 hover:text-white transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M18.3334 18.3334L16.6667 16.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <span>Search</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="bg-pinkSecondary-900 rounded-3xl mb-20">
            <div class="flex flex-wrap">
                <div class="w-full lg:w-1/2">
                    <img class="h-full object-cover rounded-2xl w-full" src="vista-assets/images/blog-content/placeholder-pink.png" alt="">
                </div>
                <div class="w-full lg:w-1/2">
                    <div class="px-8 py-12 md:py-20 flex flex-col justify-center items-start h-full">
                        <a href="#" class="inline-block text-white text-3xl font-bold mb-4 max-w-md hover:underline">Effective email marketing on a budget</a>
                        <p class="text-white text-sm font-medium mb-4">17 Jul 2023</p>
                        <p class="text-white text-opacity-70 mb-10 max-w-lg">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies here are some tips on ...</p>
                        <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Trending</span>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="font-heading text-white text-4xl font-bold mb-10">Latest articles</h2>
        <div class="flex flex-wrap -m-4">
            <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline mb-3">Make Your Phone Your Best Study Tool</p>
                    <p class="text-white text-sm font-medium mb-3">17 Jul 2023</p>
                    <p class="text-gray-400 text-sm mb-6 max-w-sm">How do we make our phone best study tool? Read on to find out more.</p>
                    <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Accounting</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline mb-3">Make Your Phone Your Best Study Tool</p>
                    <p class="text-white text-sm font-medium mb-3">17 Jul 2023</p>
                    <p class="text-gray-400 text-sm mb-6 max-w-sm">How do we make our phone best study tool? Read on to find out more.</p>
                    <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Entrepreneurship</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline mb-3">Make Your Phone Your Best Study Tool</p>
                    <p class="text-white text-sm font-medium mb-3">17 Jul 2023</p>
                    <p class="text-gray-400 text-sm mb-6 max-w-sm">How do we make our phone best study tool? Read on to find out more.</p>
                    <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Payments</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline mb-3">Make Your Phone Your Best Study Tool</p>
                    <p class="text-white text-sm font-medium mb-3">17 Jul 2023</p>
                    <p class="text-gray-400 text-sm mb-6 max-w-sm">How do we make our phone best study tool? Read on to find out more.</p>
                    <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Accounting</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline mb-3">Make Your Phone Your Best Study Tool</p>
                    <p class="text-white text-sm font-medium mb-3">17 Jul 2023</p>
                    <p class="text-gray-400 text-sm mb-6 max-w-sm">How do we make our phone best study tool? Read on to find out more.</p>
                    <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Entrepreneurship</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <img class="h-60 w-full object-cover rounded-2xl mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
                    <p class="text-white text-xl font-bold group-hover:underline mb-3">Make Your Phone Your Best Study Tool</p>
                    <p class="text-white text-sm font-medium mb-3">17 Jul 2023</p>
                    <p class="text-gray-400 text-sm mb-6 max-w-sm">How do we make our phone best study tool? Read on to find out more.</p>
                    <span class="px-2 py-1 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-md text-white text-xs font-medium">Payments</span>
                </a>
            </div>
        </div>
    </div>
</section>

Blog from Vista

<section class="position-relative py-24 bg-danger-dark"> <div class="container"> <div class="border-bottom border-white border-opacity-10 mb-20"> <div class="row"> <div class="col-lg-8 mb-8 mb-lg-0"> <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-danger px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span> <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-danger"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div> </div> <div class="col-lg-4"> <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;"> <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search"> </div> </div> </div> </div> <div class="mw-lg mx-auto mw-lg-none"><a class="btn mb-20 d-block p-0 text-start fw-normal bg-danger bg-opacity-10 rounded-2 overflow-hidden" href="#"> <div class="row"> <div class="col-lg-6 p-0"><img class="img-fluid d-block mb-12 w-100 h-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt=""></div> <div class="col-lg-6"> <div class="mw-sm mw-xl-lg mx-auto px-8 px-sm-0 py-12 pt-lg-24 pb-lg-16"> <h5 class="font-heading mb-4">Effective email marketing on a budget</h5><span class="d-block mb-4 fs-9 fw-medium">17 Jul 2023</span> <p class="text-white text-opacity-50 mb-10">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies here are some tips on ...</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Trending</span> </div> </div> </div></a> <h4 class="font-heading mb-10">Latest articles</h4> <div class="row"> <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt=""> <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span> <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span></a></div> <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt=""> <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span> <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Payments</span></a></div> <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt=""> <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span> <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Entrepreneurship</span></a></div> <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt=""> <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span> <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span></a></div> <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt=""> <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span> <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Entrepreneurship</span></a></div> <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt=""> <h6 class="font-heading mb-3">Make Your Phone Your Best Study Tool</h6><span class="d-block fs-9 fw-medium mb-3">17 Jul 2023</span> <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Payments</span></a></div> </div> </div> </div> </section>

Blog Components by Shuffle

Choose from 30 variations of Blog UI components. Presented here are variants available in Vista library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Blog UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Blog Components in Vista library

Framework

UI Library

Components

Blog from Vista

Blog from Vista

Blog Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Blog Components in Vista library

Framework

UI Library

Components

Blog from Vista

Blog from Vista

Blog Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company