Tailwindcssとは、ユーティリティファーストのCSSフレームワークです。
ユーティリティファーストなのでCSS設計など考慮しなくてもいいので、個人的に好きです！
Tailwindcssのカードデザイン
codepenに残しておいたのでHTMLのコードはそこから拾って使ってみてください。
See the Pen
tailwindcss-card by usu-blog (@usu-blog)
on CodePen.
できなかったこと
当然ですがクリック時の「ripple efect」（波紋のアニメーション）の表現ができないのは残念ですね...。
ボタンを押した後のアクションなどの指定をしたかったのですが、設定ファイルに記述が必要でCDNでは無理そうでした。
→ したがってフォーカス時の色を変えるような指定で対応してみました。
ひとこと
こまったときは、公式ドキュメントがしっかりしているので最初は調べること多いかもですが慣れると直感で大体わかるのでとても良いかと思います！
また他のコンポーネントにも挑戦してみようと思います😆
↧