tailwind实现自适应用户评价上下翻页切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：tailwind实现自适应用户评价上下翻页切换效果代码，响应式设计。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.1.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  
  

  
  
</head>

<body translate="no">
  <body class="bg-gradient-to-tr from-slate-200 to-slate-50  text-slate-800 flex flex-col justify-center items-center min-h-screen relative px-4">
        <main class="bg-white my-4 w-full max-w-2xl rounded-3xl text-center p-8 sm:p-16 [&_*]:ease-in-out">
            <h1 class="text-xl font-bold">A word from our customers</h1>
            <p class="text-sm">We've been helping businesses do their best since 2018</p>

            <div class="mt-6 grid grid-cols-1 sm:grid-cols-[60px_auto_60px] [grid-template-areas:'slider_slider'_'nav-left_nav-right'] sm:[grid-template-areas:'nav-left_slider_nav-right'] gap-2 sm:gap-6
                [&>button]:rounded-full
                [&>button]:w-10
                [&>button]:h-10
                [&>button]:shrink-0
                [&>button]:text-gray-600
                [&>button]:text-2xl
                [&>button]:transition-all 
                [&>button]:duration-500
                [&_button]:relative
                [&_button]:isolate
                [&_button]:bg-black
                sm:[&>button]:mt-8
                before:[&>button]:absolute
                before:[&>button]:inset-px
                before:[&>button]:transition-all
                before:[&>button]:duration-300
                before:[&>button]:-z-10 
                before:[&>button]:rounded-full
                hover:before:[&>button]:inset-full
                before:[&>button]:bg-white
                hover:[&>button]:text-white
                hover:[&>button]:bg-black
                hover:[&>button]:border-black
            ">
                <button data-slide="prev" class="[grid-area:nav-left] material-symbols-outlined">navigate_before</button>
                <div id="slider" class="[grid-area:slider]">
                    <div id="list-cards" class="grid [grid-template-areas:'stack'] overflow-hidden ">
                        <!-- cards loaded here -->
                    </div>
                </div>
                <button data-slide="next" class="[grid-area:nav-right] material-symbols-outlined ">navigate_next</button>
            </div>
        </main>
    
        <!-- template - cards -->
        <template id="tpl-card">
            <div class="card [grid-area:stack] opacity-0">
                <blockquote class="bg-black text-white rounded-md p-6 text-sm transition-all duration-500 scale-0 relative isolate
                    before:absolute
                    before:bg-black
                    before:w-4
                    before:h-4
                    before:rotate-45
                    before:-bottom-2
                    before:left-2/4
                    before:-translate-x-2/4
                    before:-z-10
                    before:-translate-y-full
                    before:transition
                    before:duration-500
                    before:delay-500
                "></blockquote>
                <div class="details text-sm translate-y-[150px] transition-all duration-500 flex flex-col items-center gap-2 mt-6">
                    <img review-img class="w-16 h-16 object-cover rounded-full" alt="">
                    <div class="">
                        <p review-name class="text-sm font-bold"></p>
                        <p review-role class="text-xs"></p>
                    </div>  
                </div>
            </div>
        </template>
    </body>
  
      <script >
const REVIEWS = [
{
  id: 6,
  name: 'Alice',
  role: 'Data Scientist',
  avatar: '//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90',
  review: `Absolutely mind-blowing! From graphics to gameplay, it's a virtual masterpiece. I lost track of time in the immersive experience.` },

{
  id: 0,
  name: 'Bob',
  role: 'Architect',
  avatar: '//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90',
  review: `A hidden gem for tech enthusiasts. The selection is vast, and the ease of discovering new tech is addictively delightful!` },

{
  id: 2,
  name: 'Charlie',
  role: 'DevOps Engineer',
  avatar: '//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-proce.........完整代码请登录后点击上方下载按钮下载查看