console
<header>
<nav class="navbar shadow-lg">
<div class="container flex justify-between max-w-6xl mx-auto py-3">
<div class="flex items-center">
<a class="text-2xl text-blue-500" href="#"> MDB </a>
<ul class=" hidden md:flex ml-4 text-lg text-gray-900 font-thin">
<li><a class="px-2 py-2 bg-gray-200" href="#">Home</a></li>
<li class="hover:text-gray-400"><a class="px-2 py-2" href="#">About MDB</a></li>
<li class="hover:text-gray-400"><a class="px-2 py-2" href="#">Free download</a></li>
<li class="hover:text-gray-400"><a class="px-2 py-2" href="#">Free tutorials</a></li>
</ul>
</div>
<div class="flex items-center">
<ul class="flex items-center text-lg space-x-3">
<li>
<a href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg
></a>
</li>
<li>
<a href="#">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000"><path d="M24 4.37a9.6 9.6 0 0 1-2.83.8 5.04 5.04 0 0 0 2.17-2.8c-.95.58-2 1-3.13 1.22A4.86 4.86 0 0 0 16.61 2a4.99 4.99 0 0 0-4.79 6.2A13.87 13.87 0 0 1 1.67 2.92 5.12 5.12 0 0 0 3.2 9.67a4.82 4.82 0 0 1-2.23-.64v.07c0 2.44 1.7 4.48 3.95 4.95a4.84 4.84 0 0 1-2.22.08c.63 2.01 2.45 3.47 4.6 3.51A9.72 9.72 0 0 1 0 19.74 13.68 13.68 0 0 0 7.55 22c9.06 0 14-7.7 14-14.37v-.65c.96-.71 1.79-1.6 2.45-2.61z" /></svg
></a>
</li>
<li>
<a class="flex items-center space-x-2 border p-2" href="#">
<svg class="w-4 h-4" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<span class="font-thin hover:text-gray-500">MDB GitHub</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container max-w-6xl mx-auto mb-4">
<section class="my-5 shadow-lg rounded-md bg-gradient-to-r from-blue-400 to-blue-800">
<div class="flex flex-col items-center py-20 px-10 text-white">
<h1 class="mb-8 text-4xl font-bold">Learn Bootstrap 4 with MDB</h1>
<p class="mb-5 font-semibold">Best & free guide of responsive web design</p>
<p class="mb-5 text-center font-semibold">The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written versions available. Create your own, stunning website.</p>
<a class="py-3 px-5 border-2 shadow-lg hover:shadow-xl transition duration-200" href="#"
>START FREE TUTORIAL
<svg class="w-6 h-6 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
</svg>
</a>
</div>
</section>
<section class="mt-14">
<div class="text-center mb-16 pb-14">
<h2 class="mb-16 text-4xl font-bold">What is MDB?</h2>
<p class="mb-4 text-gray-400">MDB is world's most popular Material Design framework for building responsive, mobile-first websites and apps.</p>
<p class="text-gray-400">Trusted by over 400 000 developers and designers. Easy to use & customize. 400+ material UI elements, templates & tutorials.</p>
</div>
<div class="flex pb-10 border-b-2">
<div class="flex items-center justify-center w-80 h-44 bg-green-200 rounded-md shadow-md">图片</div>
<div class="ml-14 pr-14 space-y-4">
<h3 class="text-2xl font-bold">Web Push notifications</h3>
<p class="text-gray-300">Push messaging provides a simple and effective way to re-engage with your users and in this tutorial you'll learn how to add push notifications to your web app</p>
<a class="inline-block px-5 py-2 text-white text-xs bg-blue-500 shadow-xl" href="#"
>START TUTORIAL
<svg class="inline w-6 h-6 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</a>
</div>
</div>
<div class="flex pb-10 mt-16 border-b-2">
<div class="flex items-center justify-center w-80 h-44 bg-green-200 rounded-md shadow-md">图片</div>
<div class="ml-14 pr-14 space-y-4">
<h3 class="text-2xl font-bold">Web Push notifications</h3>
<p class="text-gray-300">Push messaging provides a simple and effective way to re-engage with your users and in this tutorial you'll learn how to add push notifications to your web app</p>
<a class="inline-block px-5 py-2 text-white text-xs bg-blue-500 shadow-xl" href="#"
>START TUTORIAL
<svg class="inline w-6 h-6 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</a>
</div>
</div>
<div class="flex pb-10 mt-16 border-b-2">
<div class="flex items-center justify-center w-80 h-44 bg-green-200 rounded-md shadow-md">图片</div>
<div class="ml-14 pr-14 space-y-4">
<h3 class="text-2xl font-bold">Web Push notifications</h3>
<p class="text-gray-300">Push messaging provides a simple and effective way to re-engage with your users and in this tutorial you'll learn how to add push notifications to your web app</p>
<a class="inline-block px-5 py-2 text-white text-xs bg-blue-500 shadow-xl" href="#"
>START TUTORIAL
<svg class="inline w-6 h-6 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</a>
</div>
</div>
<nav class="mt-16">
<ul class="flex justify-center">
<li class="flex items-center px-3">
<svg class="w-3 h-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
</li>
<li class="px-3 py-1 text-white font-thin font-mono bg-blue-500 shadow-lg cursor-pointer rounded-sm">1</li>
<li class="px-3 py-1 text-gray-400 font-mono hover:bg-gray-200">2</li>
<li class="px-3 py-1 text-gray-400 font-mono hover:bg-gray-200">3</li>
<li class="px-3 py-1 text-gray-400 font-mono hover:bg-gray-200">4</li>
<li class="px-3 py-1 text-gray-400 font-mono hover:bg-gray-200">5</li>
<li class="flex items-center px-3">
<svg class="w-3 h-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
</li>
</ul>
</nav>
</section>
</div>
<footer class="bg-blue-900 mt-16">
<div class="flex justify-center pt-8 pb-14 text-white text-sm">
<a class="px-8 py-4 m-1 border flex" href="#">
<span class="pr-3">DOWNLOAD MDB</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
</a>
<a class="px-8 py-4 m-1 border flex" href="#">
<span class="pr-3">START FREE TUTORIAL </span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
</svg>
</a>
</div>
</footer>