opdavies/bootstrap-with-tailwind
1
0
Fork 0
Code Issues 1 Pull requests Actions Packages Projects Releases Wiki Activity

Add card styling

Browse source
This commit is contained in:
Oliver Davies 2023-01-09 12:00:00 +00:00
parent 7df5249503
commit f903a424ce
3 changed files with 63 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/Card.astro
View file

@ -1,23 +1,44 @@
---
---
<div>
<div
class="bg-white border rounded-md overflow-hidden border-gray-200 shadow-sm max-w-sm"
>
<img
alt=""
class="w-full h-auto object-cover"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18596650c01%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18596650c01%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
/>
<div class="p-4 font-sans">
<p>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</p>
<footer>
<ul>
<li><a href="#0">View</a></li>
<li><a href="#0">Edit</a></li>
<footer class="mt-6 flex items-center justify-between">
<div>
<ul
class="flex border border-gray-500 divide-x divide-gray-500 text-sm text-gray-500 rounded"
>
<li>
<a
class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white"
href="#0">View</a>
</li>
<li>
<a
class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white"
href="#0">Edit</a>
</li>
</ul>
</div>
<p><span>Reading time: </span>9 minutes</p>
<div>
<p class="text-sm text-gray-500">
<span class="sr-only">Reading time:</span>9 minutes
</p>
</div>
</footer>
</div>
</div>

16
src/pages/index.astro
View file

@ -23,16 +23,22 @@ import Navbar from "../components/Navbar.astro";
simply skip over it entirely.
</p>
<div class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1">
<div
class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
>
<Button shape="rounded" type="primary" text="Main call to action" />
<Button shape="rounded" type="secondary" text="Secondary action" />
</div>
</Jumbotron>
<div>
{[...Array(9).keys()].map((_) => (
<Card />
))}
<div class="bg-gray-100">
<div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
<div
class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3"
>
{[...Array(9).keys()].map((_) => <Card />)}
</div>
</div>
</div>
</body>
</html>

24
tailwind.config.cjs
View file

@ -1,9 +1,9 @@
const colors = require('tailwindcss/colors');
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
colors: {
@ -11,12 +11,26 @@ module.exports = {
750: "#343a40",
...colors.neutral,
},
}
},
fontFamily: {
sans: [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
],
},
},
},
plugins: [
plugin(({ addVariant }) => {
addVariant('hocus', ['&:hover', '&:focus'])
addVariant("hocus", ["&:hover", "&:focus"]);
}),
],
}
};