網站範本

TailBliss

TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022.

這個範本的介紹目前還沒有繁體中文版本，先以英文顯示。

Portfolio · Blog · 免費

開啟線上示範查看原始碼儲存庫

頁面

線上示範的逐頁截圖，在頁面框內捲動即可查看完整頁面。

TailBliss 網站範本，/ 頁面，第 2 部分 — /A Hugo theme built with love, using TailwindCSS, Alpine.JS, and Hugo Pipes. Images are optimized for use with Hugo Pipes for WebP format. | TailBliss

設計解讀

AI 對這套範本設計的解讀：配色、字體、間距、區塊與標誌性細節。使用範本時，Ottermind 會以它為起點。

這份解讀目前還沒有繁體中文版本，先以英文顯示。

Overall: landing page, modern, minimal, light/dark
Palette: background #f9fafb; surfaces [#e5e7eb, #615fff, #101828, #030712]; text #101828; muted text #6a7282; primary #615fff; accents [#615fff]
Type: headings ui-sans-serif, 800, sentence-case; body ui-sans-serif, 16px; scale h1 60px / h2 36px / h3 24px
Shape & spacing: button/card radius 6px, no borders, subtle shadows, section spacing 80px, content width 1248px
Sections (top to bottom): Header — fixed black nav with white text, logo on left, menu items right, dark mode toggle
Hero — two-column layout, left side has headline "TailBliss", subheading, badges, and description; right side features a rounded card with rocket illustration and brand tagline in purple gradient
Mission — full-width section with astronaut image on left, three-paragraph mission text on right, both sides aligned with dot-pattern overlay
Feature block — centered headline "Just in time for Hacktoberfest with JIT Tailwind" above paragraph text, followed by "Backed by world-renowned investors" with link
Blog preview — gray background, "From the blog" heading in purple, three equal-width cards with titles, excerpts, tags, dates, and metadata
Newsletter — centered blue gradient card with "Stay Up to Date" headline, input field, and "Notify me" button
Footer — dark navy background, centered links, social icons, copyright line with heart emoji
Signature details: Purple gradient hero card with rocket illustration
Dot-pattern overlay behind text blocks
Rounded corners on all cards and buttons
Consistent use of purple accent (#615fff) for headings and CTAs
Floating shadow effect on newsletter card
Minimalist typography with bold headings and clean spacing
Other pages: /about: brief company overview with team photo
/blog: list of posts with featured image, title, excerpt, and date
/contact: form with name, email, message fields and submit button

範本資訊

分類: Portfolio, Blog, Agency, Starter Kit
技術: Hugo
授權: Apache-2.0
作者: Jeremy Nusser
來源: Hugo Themes
價格: 免費

blog
company
dark
gallery
light
minimal
personal
portfolio
tailwind

原始設計來自 Jeremy Nusser，刊登於 Hugo Themes。Ottermind 不會複製範本程式碼，而是依據需求打造全新的網站。

Ottermind 起步用的需求

它會以草稿形式在 Studio 中開啟，送出前先補充你的品牌、受眾與頁面。

Build a portfolio website inspired by the "TailBliss" template. Reference brief: TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022. Style and features to reflect: blog, company, dark, gallery, light, minimal. Use original copy and imagery for my brand rather than the reference's placeholder content.