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

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

代码语言：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
                    be.........完整代码请登录后点击上方下载按钮下载查看