tailwind自适应页面产品服务页面内介绍效果
代码语言：html
所属分类：布局界面
代码描述：tailwind自适应页面产品服务页面内介绍效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css"> </head> <body translate="no"> <header class="text-gray-700 body-font border-b border-gray-200"> <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"> <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="https://mert.dev/tailwind-blocks" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> </svg> <span class="ml-3 text-xl">Tailwind Blocks</span> </a> <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center"> <a class="mr-5 hover:text-gray-900">First Link</a> <a class="mr-5 hover:text-gray-900">Second Link</a> <a class="mr-5 hover:text-gray-900">Third Link</a> <a class="mr-5 hover:text-gray-900">Fourth Link</a> </nav> <button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Button <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </button> </div> </header> <section class="text-gray-700 body-font"> <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"> <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center"> <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Before they sold out <br class="hidden lg:inline-block">readymade gluten </h1> <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p> <div class="flex justify-center"> <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button> <button class="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">Button</button> </div> </div> <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6"> <img class="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600/edf2f7/a5afbd"> </div> </div> </section> <section class="text-gray-700 body-font border-t border-gray-200"> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-col text-center w-full mb-20"> <h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">ROOF PARTY POLAROID</h2> <h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900">Master Cleanse Reliac Heirloom</h1> </div> <div class="flex flex-wrap -m-4"> <div class="p-4 md:w-1/3"> <div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col"> <div class="flex items-center mb-3"> <div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24"> <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> </svg> </div> <h2 class="text-gray-900 text-lg title-font font-medium">Shooting Stars</h2> </div> <div class="flex-grow"> <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p> <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </a> </div> </div> </div> <div class="p-4 md:w-1/3"> <div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col"> <div class="flex items-center mb-3"> <div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24"> <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <h2 class="text-gray-900 text-lg title-font font-medium">The Catalyzer</h2> </div> <div class="flex-grow"> <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p> <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </a> </div> </div> </div> <div class="p-4 md:w-1/3"> <div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col"> <div class="flex items-center mb-3"> <div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24"> <circle cx="6" cy="6" r="3"></circle> <circle cx="6" cy="18" r="3"></circle> <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path> </svg> </div> <h2 class="text-gray-900 text-lg title-font font-medium">Neptune</h2> </div> <div class="flex-grow"> <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p> <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </a> </div> </div> </div> </div> </div> </section> <section class="text-gray-700 body-font border-t border-gray-200"> <div class="container px-5 py-24 mx-auto flex flex-wrap"> <div class="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden"> <img alt="feature" class="object-cover object-center h-full w-full" src="https://dummyimage.com/600x600/edf2f7/a5afbd"> </div> <div class="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center"> <div class="flex flex-col mb-10 lg:items-start items-center"> <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> </svg> </div> <div class="flex-grow"> <h2 class="text-gray-900 text-lg title-font font-medium mb-3">Shooting Stars</h2> <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p> <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </a> </div> </div> <div class="flex flex-col mb-10 lg:items-start items-center"> <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <circle cx="6" cy="6" r="3"></circle> <circle cx="6" cy="18" r="3"></circle> <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path> </svg> </div> <div class="flex-grow"> <h2 class="text-gray-900 text-lg title-font font-medium mb-3">The Catalyzer</h2> <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p> <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </a> </div> </div> <div class="flex flex-col mb-10 lg:items-start items-center"> <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <div class="flex-grow"> <h2 class="text-gray-900 text-lg title-font font-medium mb-3">Neptune</h2> <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p> <a class="mt-3 text-indigo-500 inline-flex items-center">Learn More <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24"> <path d="M5 12h14M12 5l7 7-7 7"></path> </svg> </a> </div> </div> </div> </div> </section> <section class="text-gray-700 body-font border-t border-gray-200"> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-wrap w-full mb-20 flex-col items-center text-center"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Pitchfork Kickstarter Taxidermy</h1> <p class="lg:w-1/2 w-full leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table.</p> </div> <div class="flex flex-wrap -m-4"> <div class="xl:w-1/3 md:w-1/2 p-4"> <div class="border border-gray-300 p-6 rounded-lg"> <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> </svg> </div> <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2> <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p> </div> </div> <div class="xl:w-1/3 md:w-1/2 p-4"> <div class="border border-gray-300 p-6 rounded-lg"> <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <circle cx="6" cy="6" r="3"></circle> <circle cx="6" cy="18" r="3"></circle> <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path> </svg> </div> <h2 class="text-lg text-gray-900 font-medium title-font mb-2">The Catalyzer</h2> <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p> </div> </div> <div class="xl:w-1/3 md:w-1/2 p-4"> <div class="border border-gray-300 p-6 rounded-lg"> <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Neptune</h2> <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p> </div> </div> <div class="xl:w-1/3 md:w-1/2 p-4"> <div class="border border-gray-300 p-6 rounded-lg"> <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7"></path> </svg> </div> <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Melanchole</h2> <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p> </div> </div> <div class="xl:w-1/3 md:w-1/2 p-4"> <div class="border border-gray-300 p-6 rounded-lg"> <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path> </svg> </div> <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Bunker</h2> <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p> </div> </div> <div class="xl:w-1/3 md:w-1/2 p-4"> <div class="border border-gray-300 p-6 rounded-lg"> <div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4"> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> </div> <h2 class="text-lg text-gray-900 font-medium title-font mb-2">Ramona Falls</h2> <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p> </div> </div> </div> <button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button> </div> </section> <section class="text-gray-700 body-font border-t border-gray-200"> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-col text-center w-full mb-20"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Our Team</h1> <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.</p> </div> <div class="flex flex-wrap -m-2"> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/80x80/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Holden Caulfield</h2> <p class="text-gray-500">UI Designer</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/84x84/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Henry Letham</h2> <p class="text-gray-500">CTO</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/88x88/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Oskar Blinde</h2> <p class="text-gray-500">Founder</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/90x90/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">John Doe</h2> <p class="text-gray-500">DevOps</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/94x94/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Martin Eden</h2> <p class="text-gray-500">Software Engineer</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/98x98/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Boris Kitua</h2> <p class="text-gray-500">UX Researcher</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/100x90/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Atticus Finch</h2> <p class="text-gray-500">QA Engineer</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/104x94/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Alper Kamu</h2> <p class="text-gray-500">System</p> </div> </div> </div> <div class="p-2 lg:w-1/3 md:w-1/2 w-full"> <div class="h-full flex items-center border-gray-200 border p-4 rounded-lg"> <img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/108x98/edf2f7/a5afbd"> <div class="flex-grow"> <h2 class="text-gray-900 title-font font-medium">Rodrigo Monchi</h2> <p class="text-gray-500">Product Manager</p> </div> </div> </div> </div> </div> </section> <section class="text-gray-700 body-font overflow-hidden border-t border-gray-200"> <div class="container px-5 py-24 mx-auto flex flex-wrap"> <div class="lg:w-1/4 mt-48 hidden lg:block"> <div class="mt-px border-t border-gray-300 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden"> <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px">Fingerstache disrupt</p> <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Franzen hashtag</p> <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Tilde art party</p> <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Banh mi cornhole</p> <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Waistcoat squid hexagon</p> <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Pinterest occupy authentic</p> <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Brooklyn helvetica</p> <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Long Feature Two</p> <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Feature One<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0