JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="container mx-auto px-4 py-16">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Column 1 -->
    <div class="overflow-hidden h-[600px] relative">
      <div class="animate-scroll space-y-4">
        <!-- Testimonial 1 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <p class="text-gray-600 mb-4">"Great product! Highly recommended."</p>
          <p class="font-semibold">- John Doe</p>
        </div>
        <!-- Testimonial 2 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <p class="text-gray-600 mb-4">"Excellent service and support."</p>
          <p class="font-semibold">- Jane Smith</p>
        </div>
        <!-- Add more testimonials as needed -->
      </div>
      <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-white to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
    </div>

    <!-- Column 2 -->
    <div class="overflow-hidden h-[600px] relative">
      <div class="animate-scroll space-y-4">
        <!-- Add testimonials for column 2 -->
      </div>
      <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-white to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
    </div>

    <!-- Column 3 -->
    <div class="overflow-hidden h-[600px] relative">
      <div class="animate-scroll space-y-4">
        <!-- Add testimonials for column 3 -->
      </div>
      <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-white to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
    </div>
  </div>
</div>

CSS

@keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%);
    }
  }

  .animate-scroll {
    animation: scroll 1s linear infinite;
  }