Introduction of Testimonial Slider TailwindCss
Hello! Guys, today we are again here with our new and amazing creativity project, which is a Testimonial Slider TailwindCss effect. This project is made with the help of HTML, Tailwind, and JavaScript by doing their simple and easy codes step by step to get proper knowledge without any doubt. In this project, there will be the heading of the project and some lines about the project. On the right side of the page, there will be some information and feedback from people about our project. In the below information, there will be a slider button for left and right with icons. When the user clicks on the button, the testimonial card will slide, and the next card will come.
Let’s start making this Tailwind Css Testimonials Carousel together without wasting any time with the help of HTML, Tailwind and JavaScript. The code will not be very complicated, as we have used the basic concept so everyone can understand it. This is very useful. You have seen the testimonials on some websites to get the reviews of people about their websites, so you can also use them to know what others say about you.
HTML (Hypertext Markup Language)
First, we will create the structure of this Testimonial Slider TailwindCss Component with the help of HTML (the Hyper markup language used to make the structure of web pages). In this, we will give the title of the project in the title tag (which is used to give the title), and then we will move toward the main content of the project. In this, we will make a parent div in which all the content will be written, and then some child divs, one for the heading of the project and some information about it. Another is for the testimonials and two buttons, one for the left slide and one for the right slide, and the functionalities of the buttons will be done in JavaScript by applying logic to that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/keen-slider@6.8.6/keen-slider.min.css" rel="stylesheet" />
<script type="module">
import KeenSlider from 'https://cdn.jsdelivr.net/npm/keen-slider@6.8.6/+esm'
const keenSlider = new KeenSlider(
'#keen-slider',
{
loop: true,
slides: {
origin: 'center',
perView: 1.25,
spacing: 16,
},
breakpoints: {
'(min-width: 1024px)': {
slides: {
origin: 'auto',
perView: 1.5,
spacing: 32,
},
},
},
},
[]
)
const keenSliderPrevious = document.getElementById('keen-slider-previous')
const keenSliderNext = document.getElementById('keen-slider-next')
const keenSliderPreviousDesktop = document.getElementById('keen-slider-previous-desktop')
const keenSliderNextDesktop = document.getElementById('keen-slider-next-desktop')
keenSliderPrevious.addEventListener('click', () => keenSlider.prev())
keenSliderNext.addEventListener('click', () => keenSlider.next())
keenSliderPreviousDesktop.addEventListener('click', () => keenSlider.prev())
keenSliderNextDesktop.addEventListener('click', () => keenSlider.next())
</script>
<section class="bg-gray-50">
<div class="mx-auto max-w-[1340px] px-4 py-12 sm:px-6 lg:me-0 lg:py-16 lg:pe-0 lg:ps-8 xl:py-24">
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:items-center lg:gap-16">
<div class="max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Don't just take our word for it...
</h2>
<p class="mt-4 text-gray-700">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat
harum porro optio fugit a culpa sunt id!
</p>
<div class="hidden lg:mt-8 lg:flex lg:gap-4">
<button
aria-label="Previous slide"
id="keen-slider-previous-desktop"
class="rounded-full border border-rose-600 p-3 text-rose-600 transition hover:bg-rose-600 hover:text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5 rtl:rotate-180"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"
/>
</svg>
</button>
<button
aria-label="Next slide"
id="keen-slider-next-desktop"
class="rounded-full border border-rose-600 p-3 text-rose-600 transition hover:bg-rose-600 hover:text-white"
>
<svg
class="size-5 rtl:rotate-180"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 5l7 7-7 7"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
</div>
</div>
<div class="-mx-6 lg:col-span-2 lg:mx-0">
<div id="keen-slider" class="keen-slider">
<div class="keen-slider__slide">
<blockquote
class="flex h-full flex-col justify-between bg-white p-6 shadow-sm sm:p-8 lg:p-12"
>
<div>
<div class="flex gap-0.5 text-green-500">
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<div class="mt-4">
<p class="text-2xl font-bold text-rose-600 sm:text-3xl">Stayin' Alive</p>
<p class="mt-4 leading-relaxed text-gray-700">
No, Rose, they are not breathing. And they have no arms or legs … Where are
they? You know what? If we come across somebody with no arms or legs, do we
bother resuscitating them? I mean, what quality of life do we have there?
</p>
</div>
</div>
<footer class="mt-4 text-sm font-medium text-gray-700 sm:mt-6">
— Michael Scott
</footer>
</blockquote>
</div>
<div class="keen-slider__slide">
<blockquote
class="flex h-full flex-col justify-between bg-white p-6 shadow-sm sm:p-8 lg:p-12"
>
<div>
<div class="flex gap-0.5 text-green-500">
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<div class="mt-4">
<p class="text-2xl font-bold text-rose-600 sm:text-3xl">Stayin' Alive</p>
<p class="mt-4 leading-relaxed text-gray-700">
No, Rose, they are not breathing. And they have no arms or legs … Where are
they? You know what? If we come across somebody with no arms or legs, do we
bother resuscitating them? I mean, what quality of life do we have there?
</p>
</div>
</div>
<footer class="mt-4 text-sm font-medium text-gray-700 sm:mt-6">
— Michael Scott
</footer>
</blockquote>
</div>
<div class="keen-slider__slide">
<blockquote
class="flex h-full flex-col justify-between bg-white p-6 shadow-sm sm:p-8 lg:p-12"
>
<div>
<div class="flex gap-0.5 text-green-500">
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<div class="mt-4">
<p class="text-2xl font-bold text-rose-600 sm:text-3xl">Stayin' Alive</p>
<p class="mt-4 leading-relaxed text-gray-700">
No, Rose, they are not breathing. And they have no arms or legs … Where are
they? You know what? If we come across somebody with no arms or legs, do we
bother resuscitating them? I mean, what quality of life do we have there?
</p>
</div>
</div>
<footer class="mt-4 text-sm font-medium text-gray-700 sm:mt-6">
— Michael Scott
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-center gap-4 lg:hidden">
<button
aria-label="Previous slide"
id="keen-slider-previous"
class="rounded-full border border-rose-600 p-4 text-rose-600 transition hover:bg-rose-600 hover:text-white"
>
<svg
class="size-5 -rotate-180 transform"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</svg>
</button>
<button
aria-label="Next slide"
id="keen-slider-next"
class="rounded-full border border-rose-600 p-4 text-rose-600 transition hover:bg-rose-600 hover:text-white"
>
<svg
class="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</svg>
</button>
</div>
</div>
</section>
</body>
</html>TailwindCss
After making the structure of this Testimonial Carousel TailwindCss. We will now apply some styling with the help of Tailwind CSS (tthis is a framework of CSS used to give styling to the HTML webpage). We are using tailwind CSS instead of normal CSS because this makes it easy to design any webpage. Makes the website responsive for other devices very easily. In this, we will use classes to design the HTML page. Will give styling like the color of text, size and positions of divs and elements, background color, etc. We will also give styling to the icons on right and left, and at the end. We will make them responsive to use on different sizes of devices.
JavaScript of Tailwind Css Testimonials
We have made the whole design of this Testimonial Carousel TailwindCss with the help of HTML ,Tailwind, and now we will give it some logic using JavaScript. In this, we will import a module called ‘keenslider’. Then make a function in which we will target the HTML element by targeting its ID. We will give the logic of sliding in the icons of web pages to slide left and right by clicking them. Then we will make some variables and use them as a function to implement the addeventlistner property. So that the button will work properly and the testimonial card will move perfectly.
<script type="module">
import KeenSlider from 'https://cdn.jsdelivr.net/npm/keen-slider@6.8.6/+esm'
const keenSlider = new KeenSlider(
'#keen-slider',
{
loop: true,
slides: {
origin: 'center',
perView: 1.25,
spacing: 16,
},
breakpoints: {
'(min-width: 1024px)': {
slides: {
origin: 'auto',
perView: 1.5,
spacing: 32,
},
},
},
},
[]
)
const keenSliderPrevious = document.getElementById('keen-slider-previous')
const keenSliderNext = document.getElementById('keen-slider-next')
const keenSliderPreviousDesktop = document.getElementById('keen-slider-previous-desktop')
const keenSliderNextDesktop = document.getElementById('keen-slider-next-desktop')
keenSliderPrevious.addEventListener('click', () => keenSlider.prev())
keenSliderNext.addEventListener('click', () => keenSlider.next())
keenSliderPreviousDesktop.addEventListener('click', () => keenSlider.prev())
keenSliderNextDesktop.addEventListener('click', () => keenSlider.next())
</script>Output of Testimonial Slider TailwindCss
Finally, we have made this Testimonial Slider TailwindCss using the simple and basic concepts of HTML, Tailwind, and JavaScript. I hope this project will be beneficial for you. You will use it on your website, or you can practice making such projects. If you want the source code, then click on the button given below to download Tailwind Css Testimonials.
For more explanation, click on the link given below to watch the video of Tailwind Css Testimonials Carousel.
You can also check:
