Plantilla web
TailBliss
TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022.
La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.
Portfolio · Blog · Gratis
Páginas
Capturas de la demo, página a página. Desplázate dentro de cada página para verla entera.
Análisis del diseño
Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.
Este análisis aún no está disponible en español, así que se muestra en inglés.
- 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
Detalles de la plantilla
- Categoría
- Portfolio, Blog, Agency, Starter Kit
- Tecnología
- Hugo
- Licencia
- Apache-2.0
- Autor
- Jeremy Nusser
- Publicada en
- Hugo Themes
- Precio
- Gratis
- blog
- company
- dark
- gallery
- light
- minimal
- personal
- portfolio
- tailwind
Diseño original de Jeremy Nusser, publicado en Hugo Themes. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.
El briefing del que parte Ottermind
Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.
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.
Cómo usar esta plantilla
- 1
Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.
- 2
Añade al briefing tu marca, tu público, las páginas y el contenido.
- 3
Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.
