Tailwind 练手项目 2
Tailwind 练手项目 2
这次换了个 up 又滚完了一遍 tailwind，算是拾遗补缺了，之前的笔记：
- Tailwind CSS 速成
- Tailwind 练手项目
代码在：https://github.com/GoldenaArcher/tailwind，这次偷懒了就没在线效果（耸肩
首先说两点我看完 up 视频，比较喜欢的点：
-
flex 结构基本上就是用这个模板：
flex flex-col m-6 space-y-10 md:flex-row md:space-y-0 md:m-0"，这个布局是小屏幕上上下分布，中型屏幕以上左右分布的常规套路。space-是一个工具类名，用来控制所有子类的 margin，官方文档的例子是：space-y-1 > * + * margin-top: 0.25rem; /* 4px */;。 -
没有多加无意义的 breakpoints，都是以 mobile first 的设计理念
-
终于用了 directives
我找了一下，除了排版会放在一起之外，加到
@layer里的 CSS 会对:有效，如假设将btn加到@layer components {}中，那么就可以直接使用状态这点其实我还没太理解，原文是这个：
Wrapping any custom CSS with @layer also makes it possible to use modifiers with those rules, like
hover:andfocus:or responsive modifiers likemd:andlg:.是说内部可以直接实现移动端 CSS，不需要再用
media-query？那看来直接 override 没办法这么做……？ -
状态的嵌套，如：
dark:md:hover:bg-fuchsia-600 -
介绍了插件，这里在一个项目利用了
line-clamp这个插件，主要就是当内容太多了可以省略。不过现在的版本，line-clamp 是自带的，不需要使用额外的 plugin
我不太喜欢的一点是会添加额外的 claa 做样式，理论上来说用 pseudo-element，HTML 的结构会更加干净一点，不过这个 up 好喜欢用 group>div+div+div 这样的结构去做样式啊……
案例我就直接丢实现了，都是一些老生常谈的点，之前 responsive+小项目写太多了……
小项目代码 & 对比
subscribe email
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Subscribetitle>
<link rel="stylesheet" href="styles.css" />
head>
<body>
<div class="flex items-center justify-center h-screen bg-zinc-700">
<div class="bg-zinc-800 p-2 mx-6 rounded-2xl">
<div class="flex flex-col md:flex-row rounded-l-xl">
<img
src="images/image copy.jpg"
alt=""
class="object-cover rounded-xl h-80 md:h-64 md:rounded-l-xl md:rounded-r-none transform hover:scale-105 hover:rounded-xl duration-200"
/>
<div class="p-6 md:p-12">
<h1
class="font-serif text-xl font-medium text-center text-white md:text-left"
>
Get diet and fitness tips in your inbox
h1>
<p
class="max-w-xs my-4 text-xs leading-5 tracking-wide text-center text-white md:text-left"
>
Sint praesentium nihil deserunt natus quos sint vero repellendus
possimus.
p>
<div
class="flex flex-col mt-5 space-y-4 md:space-x-3 md:flex-row md:space-y-0"
>
<input
type="text"
name=""
placeholder="Enter your Email"
id=""
class="p-2 px-4 text-center text-white bg-zinc-800 border border-zinc-600 placeholder:text-xs placeholder:text-center md:text-left placeholder:md:text-left focus:outline-none"
/>
<button
class="px-5 py-3 text-xs rounded-md text-zinc-800 bg-lime-500 hover:bg-lime-700 hover:text-white duration-500"
>
Subscribe
button>
div>
div>
div>
div>
div>
body>
html>
image gallery
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Image Gallerytitle>
head>
<body>
<div class="flex items-center justify-center min-h-screen bg-cyan-50">
<div class="bg-white p-6 m-3 space-y-10 shadow-2xl rounded-3xl md:p-40">
<div
class="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-8 md:mb-24 md:justify-end"
>
<div class="group">
<a href="#">Vectora>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
>div>
div>
<div class="group">
<a href="#">Illustrationsa>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
>div>
div>
<div class="group">
<a href="#">Imagesa>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
>div>
div>
<div class="group">
<a href="#">Iconsa>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
>div>
div>
div>
<div
class="flex flex-col justify-between space-y-5 md:flex-row md:space-y-0"
>
<div class="flex justify-between border-b">
<input
type="text"
class="ml-6 border-none md:w-80 placeholder:font-thin focus:outline-none"
placeholder="Search"
/>
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 text-gray-300 duration-200 hover:scale-110"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
svg>
button>
div>
<button
class="py-3 px-14 text-lg font-normal text-white bg-black border border-black rounded-md shadow-2xl duration-200 hover:bg-white hover:text-black"
>
Upload
button>
div>
<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
<div class="relative group">
<img src="images/image1.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">Abstract Paintingp>
<p class="text-xs">245 likes - 35 Sharesp>
div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="bookmark" />
div>
div>
div>
div>
<div class="relative group">
<img src="images/image2.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">Abstract Paintingp>
<p class="text-xs">245 likes - 35 Sharesp>
div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="bookmark" />
div>
div>
div>
div>
<div class="relative group">
<img src="images/image3.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">Abstract Paintingp>
<p class="text-xs">245 likes - 35 Sharesp>
div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="bookmark" />
div>
div>
div>
div>
<div class="relative group">
<img src="images/image4.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">Abstract Paintingp>
<p class="text-xs">245 likes - 35 Sharesp>
div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="bookmark" />
div>
div>
div>
div>
<div class="relative group">
<img src="images/image5.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">Abstract Paintingp>
<p class="text-xs">245 likes - 35 Sharesp>
div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="bookmark" />
div>
div>
div>
div>
<div class="relative group">
<img src="images/image6.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">Abstract Paintingp>
<p class="text-xs">245 likes - 35 Sharesp>
div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="bookmark" />
div>
div>
div>
div>
div>
div>
div>
body>
html>
login modal
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=Rokkitt:wght@600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script>
tailwind.config = {
theme: {
fontFamily: {
sans: ['Mulish', 'sans-serif'],
mono: ['Rokkitt', 'monospace'],
},
},
};
script>
<title>Login Modaltitle>
head>
<body>
<div class="flex items-center justify-center min-h-screen bg-rose-50">
<div
class="relative flex flex-col m-6 space-y-10 bg-white shadow-2xl rounded-2xl md:flex-row md:space-y-0 md:m-0"
>
<div class="p-6 md:p-20">
<h2 class="font-mono mb-5 text-4xl font-bold">Log Inh2>
<p class="max-w-sm mb-12 font-sans font-light text-gray-600">
Log in to your account to upload or download pictures, videos or
music.
p>
<input
type="text"
class="w-full p-6 border border-gray-300 rounded-md placeholder:font-sans placeholder:font-light"
placeholder="Enter your email address"
/>
<div
class="flex flex-col items-center justify-between mt-6 space-y-6 md:flex-row md:space-y-0"
>
<div class="font-thin text-cyan-700">Forgot passworddiv>
<button
class="w-full md:w-auto flex justify-center items-center p-6 space-x-4 font-sans font-bold text-white rounded-md px-9 bg-cyan-700 shadow-cyan-100 hover:bg-opacity-90 shadow-sm hover:shadow-lg border transition hover:-translate-y-0.5 duration-150"
>
<span>Nextspan>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-7"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#ffffff"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="13" y1="18" x2="19" y2="12" />
<line x1="13" y1="6" x2="19" y2="12" />
svg>
button>
div>
<div class="mt-12 border-b border-b-gray-300">div>
<p class="py-6 text-sm font-thin text-center text-gray-400">
or log in with
p>
<div
class="flex flex-col space-x-0 space-y-6 md:flex-row md:space-x-4 md:space-y-0"
>
<button
class="flex items-center justify-center py-2 space-x-3 border border-gray-300 rounded shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2"
>
<img src="images/facebook.png" alt="" class="w-9" />
<span class="font-thin">Facebookspan>
button>
<button
class="flex items-center justify-center py-2 space-x-3 border border-gray-300 rounded shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2"
>
<img src="images/google.png" alt="" class="w-9" />
<span class="font-thin">Googlespan>
button>
div>
div>
<img src="images/image.jpg" alt="" class="w-[430px] hidden md:block" />
<div
class="group absolute -top-5 right-4 flex items-center justify-center w-10 h-10 bg-gray-200 rounded-full md:bg-white md:top-4 hover:cursor-pointer hover:-translate-y-0.5 transition duration-150"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-black group-hover:text-gray-600"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
svg>
div>
div>
div>
body>
html>
pricing card
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing Cardstitle>
<link rel="stylesheet" href="styles.css" />
head>
<body>
<div class="flex items-center justify-center bg-slate-800 min-h-screen">
<div
class="flex flex-col my-6 space-y-6 md:space-y-0 md:space-x-6 md:my-0 md:flex-row"
>
<div class="bg-slate-700 rounded-xl text-white">
<div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
<div class="text-center uppercase">Basicdiv>
<h2 class="mt-10 font-serif text-5xl text-center">100GBh2>
<h3 class="mt-2 text-center">$1.99/Monthh3>
<div class="flex justify-center">
<a
href="#"
class="text-white inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg hover:bg-violet-800 hover:border-violet-800 duration-200"
>Purchasea
>
div>
div>
<div class="border-t border-slate-700">div>
<div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
<ul class="flex flex-col space-y-2">
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">100 GB of storagespan>
li>
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">Option to add membersspan>
li>
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">Extra member benefitsspan>
li>
ul>
div>
div>
<div class="bg-violet-600 rounded-xl text-white">
<div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
<div class="text-center uppercase">Standarddiv>
<h2 class="mt-10 font-serif text-5xl text-center">200GBh2>
<h3 class="mt-2 text-center">$3.99/Monthh3>
<div class="flex justify-center">
<a
href="#"
class="text-white inline-block px-10 py-3 my-6 text-center bg-violet-600 border border-violet-600 rounded-lg hover:bg-violet-800 hover:border-violet-800 duration-200"
>Purchasea
>
div>
div>
<div class="border-t border-slate-700">div>
<div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
<ul class="flex flex-col space-y-2">
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">100 GB of storagespan>
li>
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">Option to add membersspan>
li>
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">Extra member benefitsspan>
li>
ul>
div>
div>
<div class="bg-slate-700 rounded-xl text-white">
<div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
<div class="text-center uppercase">Premiumdiv>
<h2 class="mt-10 font-serif text-5xl text-center">2TBh2>
<h3 class="mt-2 text-center">$8.99/Monthh3>
<div class="flex justify-center">
<a
href="#"
class="text-white inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg hover:bg-violet-800 hover:border-violet-800 duration-200"
>Purchasea
>
div>
div>
<div class="border-t border-slate-700">div>
<div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
<ul class="flex flex-col space-y-2">
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">100 GB of storagespan>
li>
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">Option to add membersspan>
li>
<li class="flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
svg>
<span class="text-sm ml-1">Extra member benefitsspan>
li>
ul>
div>
div>
div>
div>
body>
html>
product card
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Modaltitle>
<link rel="stylesheet" href="styles.css" />
head>
<body>
<div class="flex items-center justify-center min-h-screen bg-slate-100">
<div
class="flex flex-col p-6 m-3 space-y-10 bg-white rounded-2xl shadow-2xl md:flex-row md:space-y-0 md:space-x-10 md:m-0 md:p-16"
>
<div class="">
<img
src="images/headphone.png"
alt=""
class="mx-auto hover:scale-105 duration-200 w-60"
/>
div>
<div class="flex flex-col space-y-6">
<div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
<div
class="inline-block px-3 py-1 text-sm text-white bg-black rounded-full w-3/5 md:w-auto text-center mx-auto"
>
Free Shipping
div>
<h2 class="max-w-sm text-2xl font-medium text-center md:text-left">
Razer Kraken Kitty Edt Gaming Headset Quartz
h2>
<div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
<p class="line-through">$799p>
<p class="text-5xl font-bold">$599p>
<p class="text-sm font-light text-gray-400">
This offer is valid until April 3rd or as long as stock lasts!
p>
div>
<div class="group">
<button
class="w-full transition-all duration-150 bg-blue-700 text-white border-b-8 border-b-blue-700 rounded-lg group-hover:border-t-8 group-hover:border-b-0 group-hover:bg-bl-700 group-hover:border-t-blue-700 group-hover:shadow-lg"
>
<div
class="px-8 py-4 duration-150 bg-blue-500 rounded-lg group-hover:bg-blue-700"
>
Add to card
div>
button>
div>
<div class="flex items-center space-x-3 group">
<div
class="w-3 h-3 bg-green-400 rounded-full group-hover:animate-ping"
>div>
<div class="text-sm">50+ pcs. in stockdiv>
div>
<div
class="flex flex-col space-y-4 md:space-y-0 md:space-x-4 md:flex-row"
>
<button
class="flex items-center justify-center py-3 px-5 space-x-3 border-2 border-gray-300 rounded-lg shadow-sm hover:bg-opacity-30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-150"
>
<img src="images/weight.png" alt="" class="w-8" />
<span>Add to cartspan>
button>
<button
class="flex items-center justify-center py-3 px-5 space-x-3 border-2 border-gray-300 rounded-lg shadow-sm hover:bg-opacity-30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-150"
>
<img src="images/heart.png" alt="" class="w-8" />
<span>Add to wishlistspan>
button>
div>
div>
div>
div>
div>
body>
html>
regular proj
这里就放一些 directives 的配置了。
config:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./*.html'],
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
extend: {
colors: {
strongCyan: 'hsl(171, 66%, 44%)',
lightBlue: 'hsl(233, 100%, 69%)',
darkGrayishBlue: 'hsl(210, 10%, 33%)',
grayishBlue: 'hsl(201, 11%, 66%)',
},
fontFamily: {
sans: ['Bai Jamjuree', 'sans-serif'],
},
},
},
plugins: [],
};
实现的 css：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h3 {
@apply mb-8 text-4xl font-bold text-darkGrayishBlue md:text-5xl;
}
h5 {
@apply mb-2 text-2xl font-bold text-darkGrayishBlue;
}
}
.section-container {
@apply max-w-6xl mx-auto text-center px-10;
}
.section-content {
@apply max-w-3xl mx-auto leading-9 text-center text-grayishBlue;
}
.button-container {
@apply flex flex-col justify-center w-full space-y-6 text-xl text-white md:flex-row md:space-y-0 md:space-x-4;
}
body {
/* background-image: url('../images/bg-header-desktop.png');
background-repeat: no-repeat;
background-size: contain; */
@apply bg-[url('../images/bg-header-desktop.png')] bg-no-repeat backim bg-contain;
}
@media (max-width: 576px) {
body {
/* background-image: url('../images/bg-header-mobile.png'); */
@apply bg-[url('../images/bg-header-mobile.png')];
}
}
.ficon:hover {
filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg) brightness(
101%
) contrast(94%);
}
我试了一下，背景图片两种写法都可以用，看个人倾向了。
稍微复杂一些的，tailwind 没有实现很多遍的，这种可以在 directive 中声明然后反复用，或者麻烦一点重复写也不是不行，我个人倾向前者。
grid system
html 如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Alata&family=Barlow+Semi+Condensed:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Testimonial Gridtitle>
head>
<body class="bg-gray-200">
<div class="container mx-auto max-w-7xl p-2 md:p-10">
<div
class="grid gap-6 grid-cols-1 text-white md:grid-cols-2 lg:grid-cols-4"
>
<div class="relative p-10 rounded-xl bg-purple-700 md:col-span-2">
<img
src="images/bg-pattern-quotation.svg"
alt=""
class="absolute top-3 right-10 scale-125 md:top-7 md:right-24 md:scale-150"
/>
<div class="flex z-10 space-x-4">
<img
src="images/image-daniel.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Daniel Cliffordh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="relative z-10 mt-6 text-xl">
I received a job offer mid-course, and the subjects I learned were
current, if not more so, in the company I joined. I honestly feel I
got every penny's worth.
p>
<p class="mt-6 opacity-50 line-clamp-6">
"I was an EMT for many years before I joined the bootcamp. I've been
looking to make a transition and have heard some people who had an
amazing experience here. I signed up for the free intro course and
found it incredibly fun! I enrolled shortly thereafter. The next 12
weeks was the best - and most grueling - time of my life. Since
completing the course, I've successfully switched careers, working
as a Software Engineer at a VR startup. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ratione vero repudiandae, quasi atque
officiis eum consectetur odio amet dolorem deleniti repellat
expedita aut sunt laudantium cum itaque nam voluptatum quod! Quo
totam sequi omnis deserunt? Sit nam molestiae excepturi,
perspiciatis labore deleniti eum, eligendi quisquam quod sed nobis
exercitationem tempora! "
p>
div>
<div class="p-10 rounded-xl bg-gray-600 md:col-span-1 lg:row-start-1">
<div class="flex space-x-4">
<img
src="images/image-jonathan.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Jonathan Waltersh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
The team was very supportive and kept me motivated
p>
<p class="mt-6 opacity-50 line-clamp-5">
"I started as a total newbie with virtually no coding skills. I now
work as a mobile engineer for a big company. This was one of the
best investments I've made in myself. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Atque ipsam veritatis natus illum
ullam ab, nesciunt rerum nobis, quibusdam ad voluptatum rem
necessitatibus facere nihil deleniti assumenda vel velit neque quia,
nisi ipsum laudantium impedit eveniet iste. Pariatur, exercitationem
consequuntur praesentium a est eum velit quos maiores ipsum facere
tempora! "
p>
div>
<div
class="hidden p-10 rounded-xl text-gray-900 bg-white md:block md:col-span-2 lg:col-span-1 lg:row-span-2"
>
<div class="flex space-x-4">
<img
src="images/image-kira.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Kira Whittleh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
Such a life-changing experience. Highly recommended!
p>
<p class="mt-6 opacity-50">
"Before joining the bootcamp, I've never written a line of code. I
needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former
student of theirs who can only say wonderful things about the
program. The entire curriculum and staff did not disappoint. They
were very hands-on and I never had to wait long for assistance. The
agile team project, in particular, was outstanding. It took my
learning to the next level in a way that no tutorial could ever
have. In fact, I've often referred to it during interviews as an
example of my developent experience. It certainly helped me land a
job as a full-stack developer after receiving multiple offers. 100%
recommend!"
p>
div>
<div
class="p-10 rounded-xl text-gray-900 bg-white md:col-span-1 md:row-start-2 md:col-start-2 lg:col-start-1"
>
<div class="flex space-x-4">
<img
src="images/image-jeanette.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Jeanette Harmonh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
An overall wonderful and rewarding experience
p>
<p class="mt-6 opacity-50">
"Thank you for the wonderful experience! I now have a job I really
enjoy, and make a good living while doing something I love."
p>
div>
<div class="p-10 rounded-xl bg-gray-900 md:col-span-2">
<div class="flex space-x-4">
<img
src="images/image-patrick.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Patrick Abramsh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
Awesome teaching support from TAs who did the bootcamp themselves.
Getting guidance from them and learning from their experiences was
easy.
p>
<p class="mt-6 opacity-50">
"The staff seem genuinely concerned about my progress which I find
really refreshing. The program gave me the confidence necessary to
be able to go out in the world and present myself as a capable
junior developer. The standard is above the rest. You will get the
personal attention you need from an incredible community of smart
and amazing people."
p>
div>
<div class="p-10 rounded-xl text-gray-900 bg-white md:hidden">
<div class="flex space-x-4">
<img
src="images/image-kira.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Kira Whittleh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
Such a life-changing experience. Highly recommended!
p>
<p class="mt-6 opacity-50">
"Before joining the bootcamp, I've never written a line of code. I
needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former
student of theirs who can only say wonderful things about the
program. The entire curriculum and staff did not disappoint. They
were very hands-on and I never had to wait long for assistance. The
agile team project, in particular, was outstanding. It took my
learning to the next level in a way that no tutorial could ever
have. In fact, I've often referred to it during interviews as an
example of my developent experience. It certainly helped me land a
job as a full-stack developer after receiving multiple offers. 100%
recommend!"
p>
div>
div>
div>
body>
html>
`
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Alata&family=Barlow+Semi+Condensed:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Testimonial Gridtitle>
head>
<body class="bg-gray-200">
<div class="container mx-auto max-w-7xl p-2 md:p-10">
<div
class="grid gap-6 grid-cols-1 text-white md:grid-cols-2 lg:grid-cols-4"
>
<div class="relative p-10 rounded-xl bg-purple-700 md:col-span-2">
<img
src="images/bg-pattern-quotation.svg"
alt=""
class="absolute top-3 right-10 scale-125 md:top-7 md:right-24 md:scale-150"
/>
<div class="flex z-10 space-x-4">
<img
src="images/image-daniel.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Daniel Cliffordh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="relative z-10 mt-6 text-xl">
I received a job offer mid-course, and the subjects I learned were
current, if not more so, in the company I joined. I honestly feel I
got every penny's worth.
p>
<p class="mt-6 opacity-50 line-clamp-6">
"I was an EMT for many years before I joined the bootcamp. I've been
looking to make a transition and have heard some people who had an
amazing experience here. I signed up for the free intro course and
found it incredibly fun! I enrolled shortly thereafter. The next 12
weeks was the best - and most grueling - time of my life. Since
completing the course, I've successfully switched careers, working
as a Software Engineer at a VR startup. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ratione vero repudiandae, quasi atque
officiis eum consectetur odio amet dolorem deleniti repellat
expedita aut sunt laudantium cum itaque nam voluptatum quod! Quo
totam sequi omnis deserunt? Sit nam molestiae excepturi,
perspiciatis labore deleniti eum, eligendi quisquam quod sed nobis
exercitationem tempora! "
p>
div>
<div class="p-10 rounded-xl bg-gray-600 md:col-span-1 lg:row-start-1">
<div class="flex space-x-4">
<img
src="images/image-jonathan.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Jonathan Waltersh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
The team was very supportive and kept me motivated
p>
<p class="mt-6 opacity-50 line-clamp-5">
"I started as a total newbie with virtually no coding skills. I now
work as a mobile engineer for a big company. This was one of the
best investments I've made in myself. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Atque ipsam veritatis natus illum
ullam ab, nesciunt rerum nobis, quibusdam ad voluptatum rem
necessitatibus facere nihil deleniti assumenda vel velit neque quia,
nisi ipsum laudantium impedit eveniet iste. Pariatur, exercitationem
consequuntur praesentium a est eum velit quos maiores ipsum facere
tempora! "
p>
div>
<div
class="hidden p-10 rounded-xl text-gray-900 bg-white md:block md:col-span-2 lg:col-span-1 lg:row-span-2"
>
<div class="flex space-x-4">
<img
src="images/image-kira.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Kira Whittleh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
Such a life-changing experience. Highly recommended!
p>
<p class="mt-6 opacity-50">
"Before joining the bootcamp, I've never written a line of code. I
needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former
student of theirs who can only say wonderful things about the
program. The entire curriculum and staff did not disappoint. They
were very hands-on and I never had to wait long for assistance. The
agile team project, in particular, was outstanding. It took my
learning to the next level in a way that no tutorial could ever
have. In fact, I've often referred to it during interviews as an
example of my developent experience. It certainly helped me land a
job as a full-stack developer after receiving multiple offers. 100%
recommend!"
p>
div>
<div
class="p-10 rounded-xl text-gray-900 bg-white md:col-span-1 md:row-start-2 md:col-start-2 lg:col-start-1"
>
<div class="flex space-x-4">
<img
src="images/image-jeanette.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Jeanette Harmonh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
An overall wonderful and rewarding experience
p>
<p class="mt-6 opacity-50">
"Thank you for the wonderful experience! I now have a job I really
enjoy, and make a good living while doing something I love."
p>
div>
<div class="p-10 rounded-xl bg-gray-900 md:col-span-2">
<div class="flex space-x-4">
<img
src="images/image-patrick.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Patrick Abramsh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
Awesome teaching support from TAs who did the bootcamp themselves.
Getting guidance from them and learning from their experiences was
easy.
p>
<p class="mt-6 opacity-50">
"The staff seem genuinely concerned about my progress which I find
really refreshing. The program gave me the confidence necessary to
be able to go out in the world and present myself as a capable
junior developer. The standard is above the rest. You will get the
personal attention you need from an incredible community of smart
and amazing people."
p>
div>
<div class="p-10 rounded-xl text-gray-900 bg-white md:hidden">
<div class="flex space-x-4">
<img
src="images/image-kira.jpg"
alt=""
class="w-10 h-10 rounded-full ring-2 ring-purple-300"
/>
<div class="text-sm">
<h4 class="opacity-90">Kira Whittleh4>
<p class="opacity-50">Verified Graduatep>
div>
div>
<p class="mt-6 text-xl">
Such a life-changing experience. Highly recommended!
p>
<p class="mt-6 opacity-50">
"Before joining the bootcamp, I've never written a line of code. I
needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former
student of theirs who can only say wonderful things about the
program. The entire curriculum and staff did not disappoint. They
were very hands-on and I never had to wait long for assistance. The
agile team project, in particular, was outstanding. It took my
learning to the next level in a way that no tutorial could ever
have. In fact, I've often referred to it during interviews as an
example of my developent experience. It certainly helped me land a
job as a full-stack developer after receiving multiple offers. 100%
recommend!"
p>
div>
div>
div>
body>
html>
这里我把原本的布局改了，中屏幕以下是一列的结构，中屏幕我改成了两列，大屏幕改成了四列，主要是从内容的字数上来说我觉得这么改比较好看：
原本就直接从 col-1 跳到了 col-4，但是 md 上我觉得一些卡片留白太多了
不需要 JS 的特效
这个特效是通过一个叫做 group:focus 的特效做的：
<div class="py-1 border-b outline-none group" tabindex="4">
<div
class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease"
>
<div class="transition duration-500 ease group-hover:text-red-500">
What about other Chromium browsers
div>
<div
class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
<path
fill="none"
stroke="currentColor"
stroke-width="3"
d="M1 1l8 8 8-8"
/>
svg>
div>
div>
<div
class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease"
>
<p class="py-2 text-justify text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, repellat
amet doloribus consequuntur eos similique provident tempora voluptates
iure quia fuga dicta voluptatibus culpa mollitia recusandae delectus id
suscipit labore?
p>
div>
div>
我本来还以为是通过 JS 实现的……妙啊……