Webサイトテンプレート

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 Webサイトテンプレート、/ ページ、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.