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/e.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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