View for rails template

_card.html.slim

.max-w-sm.rounded.overflow-hidden.shadow-lg
  = image_tag image_url, class:"w-full"
  .px-6.py-4
    .font-bold.text-xl.mb-2 = title
    p.text-gray-700.text-base = content
  
  .px-6.py-4
    - tags.each do |tag|
      span.inline-block.bg-gray-200.rounded-full.px-3.py-1.text-sm.font-semibold.text-gray-700.mr-2
        = tag

_side_menu.html.slim

ul
  - items.each do |item|
    li.mt-4 = link_to item[:title].capitalize, "##{item[:title]}", class: 'uppercase text-xs text-gray-700 font-semibold'
    - item[:items].each do |item|
      li = link_to item, "##{item}", class: 'uppercase text-xs text-gray-600'

devise-registration-new.html.slim

h2 = t("devise.registrations.new.sign_up")

= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
  = f.error_notification

  = f.input :email,
            required: true,
            autofocus: true,
            placeholder: '[email protected]',
            input_html: { autocomplete: "email" }

  = f.input :password,
            required: true,
            placeholder: t('activerecord.attributes.user.password'),
            input_html: { autocomplete: "new-password" }

  = f.button :submit, t("devise.registrations.new.sign_up"), class: 'btn'

= render "users/shared/links"

devise-sessions-new.slim

h2 = t("devise.sessions.new.sign_in")

= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
  = f.input :email,
              required: false,
              autofocus: true,
              placeholder: '[email protected]',
              input_html: { autocomplete: "email" }
  = f.input :password,
              required: false,
              placeholder: t('activerecord.attributes.user.password'),
              input_html: { autocomplete: "current-password" }

  = f.input :remember_me, as: :boolean if devise_mapping.rememberable?

  = f.button :submit, t("devise.sessions.new.sign_in"), class: 'btn'

= render "users/shared/links"

devise-shared-links.slim

- if controller_name != 'sessions'
  = link_to t("devise.shared.links.sign_in"), new_session_path(resource_name)
  br

- if devise_mapping.registerable? && controller_name != 'registrations'
  = link_to t("devise.shared.links.sign_up"), new_registration_path(resource_name)
  br

- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
  = link_to t("devise.shared.links.forgot_your_password"), new_password_path(resource_name)
  br

- if devise_mapping.confirmable? && controller_name != 'confirmations'
  = link_to t('devise.shared.links.didn_t_receive_confirmation_instructions'), new_confirmation_path(resource_name)
  br

- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks'
  = link_to t('devise.shared.links.didn_t_receive_unlock_instructions'), new_unlock_path(resource_name)
  br

- if devise_mapping.omniauthable?
  - resource_class.omniauth_providers.each do |provider|
    = link_to t('devise.shared.links.sign_in_with_provider', provider: OmniAuth::Utils.camelize(provider)), omniauth_authorize_path(resource_name, provider)
    br

stylesheet.html.slim

.bg-blue-100.border.border-blue-500.text-blue-700.px-4.py-3.mt-3.mx-auto.text-center class="w-6/12"
  p.text-sm This page shows how to config and use Tailwindcss. You can edit it to have a nice stylesheet page for your project!

.container.mx-auto.mt-4
  
  
.container.mx-auto.mt-4.mb-6.relative.flex
  .sticky.top-0.h-screen class="w-1/5"
    = render 'components/side_menu', items: [ \
       { title: 'default-style', items: [ 'typography', 'form' ]}, \
       { title: 'examples', items: [ 'card', 'button' ]}, \
      ]

  .shadow-lg.p-6.bg-white class="w-4/5"
    h1 Stylesheet
    p
      | This rails app use
      =< link_to 'Tailwindcss', 'https://tailwindcss.com/docs/utility-first'
      | . You can edit default style in
      span.text-gray-800.bg-gray-300.px-1<> app/javascript/stylesheets/config/
      | files.
    
    hr.my-12
    h2#default-style Default style
    h3#typography Typography
    p.mb-2
      | See typography config in 
      span.text-gray-800.bg-gray-300.px-1<> app/javascript/stylesheets/config/typography.css
    
    p.mb-2
      | Default font is
      span.font-semibold< Source Sans Pro
      | . 
    pre.text-sm
        code.css
          | /* app/javascript/stylesheets/config/typography.css */
            @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

            body {
              font-family: 'Source Sans Pro', sans-serif;
            }
    
    .flex.mt-4
      .mr-4 class="w-1/2"
        h1 Main title
        h2 Second title
        h3 Third title

      pre.text-sm class="w-1/2"
        code.javascript
          | // no class needed for headers with default config
            h1 Main title
            h2 Second title
            h3 Third title

    h3#form Form
    p.mb-2
      | See form config in 
      span.text-gray-800.bg-gray-300.px-1<> app/javascript/stylesheets/components/form.css
    
    .flex.mt-4
      .mr-4 class="w-1/2"
        = simple_form_for User.new, url: '', method: :get do |f|
          = f.input :email, placeholder: '[email protected]'
          = f.input :password, placeholder: 'Your password'
          = f.submit 'Sign in', class: 'btn'

      pre.text-sm class="w-1/2"
        code.javascript
          | // In view
            = simple_form_for User.new do |f|
              = f.input :email, placeholder: '[email protected]'
              = f.input :password, placeholder: 'Your passord'
              = f.submit 'Sign in', class: 'btn'


    hr.my-12
    h2#examples Examples
    h3#card Using a partial: card
    .flex
      .mr-4 class="w-1/2"
        = render 'components/card',
          title: 'The Coldest Sunset',
          image_url: 'https://images.unsplash.com/photo-1563216368-5b6a40648062?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80',
          content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.',
          tags: %w[#photography #travel #winter]

      div class="w-1/2"
        pre.text-sm.mb-2
          code.javascript
            | // in the view
              = render 'components/card',
                title: 'The Coldest Sunset',
                image_url: 'photo-1563216368-5b6a40648062',
                content: 'Lorem ipsum dolor sit amet [...]',
                tags: %w[#photography #travel #winter]
        pre.text-sm
          code.javascript
            | // app/views/components/_card.html.slim
              .max-w-sm.rounded.overflow-hidden.shadow-lg
                = image_tag image_url, class:"w-full"
                .px-6.py-4
                  .font-bold.text-xl.mb-2 = title
                  p.text-gray-700.text-base = content
                
                .px-6.py-4
                  - tags.each do |tag|
                    span.inline-block.bg-gray-200.rounded-full.px-3.py-1.text-sm.font-semibold.text-gray-700.mr-2
                      = tag
    h3#button Using a custom class: button
    .flex
      .mr-4 class="w-1/2"
        button.btn.btn-blue Click-me

      div class="w-1/2"
        pre.text-sm.mb-2
          code.javascript
            | // in the view
              button.btn.btn-blue Click-me

        pre.text-sm
          code.css
            | /* app/javascript/stylesheets/components/button.css */
              .btn {
                @apply font-bold py-2 px-4 rounded;
              }

              .btn-blue {
                @apply bg-blue-500 text-white;
              }

              .btn-blue:hover {
                @apply bg-blue-700;
              }

link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/atom-one-light.min.css"
script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"

javascript:
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
    });
  });