Forem: CodeWithKenn

NEXTJS: getServerSideProps not working into components

CodeWithKenn — Fri, 18 Mar 2022 10:07:45 +0000

Hey, Guys!

This is Kenn here, from CodeWithKenn.
From today, you'll be seeing many React/Next/Gatsby related bugs solved, just decided to add a kind of bugs Documentation style.

Because, I ended up searching for the same bugs after months (I don't remember what the solutions were). So, I decided to start documenting it here on Dev.to

This helps me to save some time and be more productive.

So, Feel free to follow if you're interested! Peace ;)

Bug Info

NEXTJS: getServerSideProps not working into components

Bug Solution

You cannot use getServerSidePropsin non-page components.

getServerSidePropscan only be exported from a page. You can’t export it from non-page files.

👉 More Details

Let's Connect

Want to start blogging? 🔥Join NOW!

TypeError: (0 , next_sanity__WEBPACK_IMPORTED_MODULE_0__.createImageUrlBuilder) is not a function

CodeWithKenn — Sat, 12 Mar 2022 14:11:57 +0000

Hey, Guys!

This is Kenn here, from CodeWithKenn.
From today, you'll be seeing many React/Next/Gatsby related bugs solved, just decided to add a kind of bugs Documentation style.

Because, I ended up searching for the same bugs after months (I don't remember what the solutions were). So, I decided to start documenting it here on Dev.to

This helps me to save some time and be more productive.

So, Feel free to follow if you're interested! Peace ;)

Bug Info

TypeError: (0 , next_sanity__WEBPACK_IMPORTED_MODULE_0__.createImageUrlBuilder) is not a function

Bug Solution

*createImageUrlBuilder * is no longer wrapped by next-sanity and you'll need to install the dependency yourself Next-Sanity

$ npm install @sanity/image-url // or $ yarn add @sanity/image-url

Notice also that createImageUrlBuilder is now a default import.

-import { createImageUrlBuilder } from 'next-sanity' +import createImageUrlBuilder from '@sanity/image-url'

More Details here

Let's Connect

Want to start blogging? 🔥Join NOW!

Python Lists Cheat Sheet - Developer Resources

CodeWithKenn — Mon, 14 Feb 2022 17:43:00 +0000

Hey, there!

This is Kenn, Your Daily Advocate from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

In this article, we won't talk much. For a couple of days, I've been thinking about a way of making my content easier and shorter so that Developers won't have to spend so much time scrolling; I want this Blog a Place of Resources and Discovery, not a Boring Blog.

What are Python Lists?

Today, we're gonna get one of the first resources, Python Lists Easy Cheatsheet.

Python Lists are used to store an ordered collection of items, which might be of different types but usually they aren't.

Cheatsheet Content

Step 1

Snippet - Image

Snippet - Code

# Create an empty list using square brackets.
numbers = []
print(numbers) # Output: []

# Create an empty list using list().
numbers = list()
print(numbers) # Output: []

# Create a list of numbers.
numbers = [1, 2, 3]
print(numbers) # Output: [1, 2, 3]

# Create a list of numbers in a range.
numbers = list(range(1, 4))
print(numbers) # Output: [1, 2, 3]

# Create a list of tuples.
tuples_list = [(1, 2), (2, 4), (3, 6)]
print(tuples_list) # Output: [(1, 2), (2, 4), (3, 6)]

Step 2

Snippet - Image

Snippet - Code

# Create a list of lists.
list_of_lists = [[1, 2], [2, 4], [3, 6]]
print(list_of_lists) # Output: [[1, 2], [2, 4], [3, 6]]

# Create a list with items of different data types.
random_list = [1, "hey", [1, 2]]
print(random_list) # Output: [1, "hey", [1, 2]]

# Get length of list by using len() method.
numbers = [5, 8, 8]
print(len(numbers)) # Output: 3

# Access elements of a list by indexing.
str_list = ["hey", "there!", "how", "are", "you?"]
print(str_list[0]) # Output: "hey"
print(str_list[len(str_list) - 1]) # Output: "you?"
print(str_list[-1]) # Output: "you?"

Step 3

Snippet - Image

Snippet - Code

# Slicing a list.
str_list = ["hey", "there!", "how", "are", "you?"]
print(str_list[2:]) # Output: ["how", "are", "you?"]
print(str_list[:2]) # Output: ["hey", "there!"]
print(str_list[-3:]) # Output: ["how", "are", "you?"]
print(str_list[:-3]) # Output: ["hey", "there!"]
print(str_list[1:4]) # Output: ["there!", "how", "are"]
# Get a copy of list by slicing.
print(str_list[:]) # Output: ["hey", "there!", "how", "are", "you?"]

Step 4

Snippet - Image

Snippet - Code


# Append to a list.
numbers = [1, 2]
print(numbers) # Output: [1, 2]
numbers.append(3)
print(numbers) # Output: [1, 2, 3]

# Concatenate lists.
numbers = [1, 2]
strings = ["Hey", "there"]
print(numbers + strings) # Output: [1, 2, "Hey", "there"]

Step 5

Snippet - Image

Snippet - Code

# Mutate a list, that is, change its contents.
numbers = [1, 2, 3]
numbers[0] = 100
print(numbers) # Output: [100, 2, 3]
numbers[0:2] = [300, 400]
print(numbers) # Output: [300, 400, 3]
numbers[1:3] = []
print(numbers) # Output: [300]
numbers[:] = []
print(numbers) # Output: []

# Insert item to a list.
greeting = ["how", "you?"]
greeting.insert(1, "are")
print(greeting) # Output: ["how", "are", "you?"]

Step 6

Snippet - Image

Snippet - Code

# Our list of lists.
matrix_1 = [[1,1,1], [2,2,2], [3,3,3]]
matrix_2 = [[4,4,4], [5,5,5], [6,6,6]]

# Matrix addition with for loop.
# Assuming that the matrices are of the same dimensions
matrix_sum = []
for row in range(len(matrix_1)):
  matrix_sum.append([])
  for column in range(len(matrix[0])):
      matrix_sum[row].append(matrix_1[row][column] + matrix_2[row][column])

Step 7

Snippet - Image

Snippet - Code


# Our list of lists.
matrix_1 = [[1,1,1], [2,2,2], [3,3,3]]
matrix_2 = [[4,4,4], [5,5,5], [6,6,6]]


# Rewrite using list comprehension only for inner lists.
matrix_sum = []
for row in range(len(matrix_1)):
  matrix_sum.append([matrix_1[row][column] + matrix_2[row][column] for column in range(len(matrix[0]))])

# Rewrite using nested list comprehension.
matrix_sum = [[matrix_1[row][column] + matrix_2[row][column] for column in range(len(matrix[0]))]
              for row in range(len(matrix_1))]

print(matrix_sum) # Output: [[5, 5, 5], [7, 7, 7], [9, 9, 9]]

Credit - Cheat Sheet

⭐ All the Credit goes to @ShyamaSankar

🌎 Before Leaving

Want to start blogging? 🔥Join NOW!

Getting Started with Nextjs and GraphCMS

CodeWithKenn — Fri, 04 Feb 2022 12:53:41 +0000

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

Are you looking for a way to build a website with a faster and easier process? this is for you!
Here I am to help you get started with Headless CMS and React Technologies (Ecosystem).

In a nutshell, today we're going to see how to connect Nextjs as Frontend to GraphCMS as Headless CMS.

The Tech Stack

We're going to use:

*Nextjs: **It lets you build server-side rendering and static web applications using React. It's a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application. *(FreeCodeCamp)

We're going to use it as Frontend.

*GraphCMS: **GraphCMS is the Headless CMS allowing you to build digital experiences the way you envisioned them - with all your backends, frontends, and services, working together in harmony. *(GraphCMS)

GraphCMS is going to be used as our Backend.

*GraphQL: **GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that prioritizes giving clients exactly the data they request and no more. *(RedHat)

The Communication between Nextjs and GraphCMS is going to be made possible by GraphQL. We'll fetch data using it.

**Tailwind CSS: **Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.

Hey! In my Blog, I don't complicate stuff. I write simple, useful, and short articles. So 😎 follow me!

Let's start Building

GraphCMS as Headless CMS

Create a Free Account and Setup the Project

Go to the Signup Page 👉 Create An Account
Start a New Blank Project

Enter the Project Name, Description and Select the CDN Node for your Project.

Choose the Free Plan

Skip this part, You will invite later

Note: This Section can help you invite your client (if you're doing some Freelance work with somebody).

Here You Go!

Creating Content Model (Schema Section)

Give the Content Model Name.
Don't worry, we're gonna explain what a Content model is in a couple of seconds.

On our Website, we're gonna Write a Greeting text from GraphCMS and fetch it to the Frontend using GraphQL.

⛳*** A content model documents all the different kinds of content you have on your website. It breaks content types down into their component parts, describes them in detail, and maps out how they relate to one another.***

Content Model Details Structure

In this step, you only have to choose what you really want to use. You can find many data fields you can explore, such as Single Text, Multi-Line Text, Markdown, Slug, Image, Rich-Text, Date, Localization.

Note: Most of the Headless CMSs have the same data types in their platforms. So, One you mastered this, You can use whatever Headless CMS you want.

You will find a list of them.

We're gonna use the Single-line text and Multi-line text fields.

Choosing Fields and Entering Fields Title

Let's Enter our Welcome Text (Content Section)
Go to the Next Section (Content) and Choose the Schema (GrettingMessage for our Project)

Create the Content

Note: This can be created as many as we want. For Example, we can create many employees' names to show on the Website.

Nextjs as our Frontend Framework

We'll be using a Nextjs + Tailwind CSS Starter and Install GraphQL:

Install The Project

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Install graphql-request

yarn add graphql-request

Install GraphQL

yarn add graphql

What we have got:

We can also add some customer font using Tailwind CSS:

Let's clean the Index Component Page:

import Head from 'next/head'

export default function Home() {


  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      <Head>
        <title>Next - Headless CMS</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
        <h1 className="text-6xl font-bold">
          Welcome to{' '}
          <a className="text-blue-600" href="https://graphcms.com">
            GraphCMS
          </a>
        </h1>



        <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full"></div>
      </main>

      <footer className="flex h-24 w-full items-center justify-center border-t">
        <a
          className="flex items-center justify-center"
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className="ml-2 h-4" />
        </a>
      </footer>
    </div>
  )
}

Let's Connect Nextjs to GraphCMS:

Go back to the CMS in the Project Settings Page, then to the Public Content API, and Copy the Content API Key.

After that, Let's Go back in Nextjs and Create a .env.local and paste the API key as below:

Let's Import graphql-request into our index.js project:

import { GraphQLClient } from 'graphql-request'

// And let's initialize our GraphQL Client project

const graphcms = new GraphQLClient(process.env.GRAPHQL_URL_ENDPOINT)


export default function Home() {

  return (
    ...
  )
}

Done 🎉
We're connected!

Let's run the app:

npm run dev

Here is the output:

Note: This doesn't come from the CMS, remember we made it from the index.js file. 🤔

Now, Let's create our query from GraphCMS

This is our query:

query {
  greetingMessages {
    greatTitle
    productDescription
  }
}

Let's add it into Nextjs ìndex.js file using the getStaticProps function:

// Query Data
export async function getStaticProps() {
  try {
    const query = `
      query {
        greetingMessages {
          greatTitle
          productDescription
        }
      }
    `

    const { greetingMessages } = await graphcms.request(query)

    return {
      props: {
        greetingMessages,
      },
    }
  } catch (error) {
    console.log(error)
  }

  return {
    props: {},
  }
}

Note: We have used the try...catch method for simple error handling, but it's not a big deal 👋

Last Step: Import The GreetingMessages as a Prop into the main Component:

export default function Home({ greetingMessages }) {

  return (
    ...
  )
}

Let's now see if it really works 😃 after refreshing the server:

Yes, it does work! 🔥

Let's render the data and view it on the front page 😃

export default function Home({ greetingMessages }) {

  return (
   <div>
        ...
     <div className="mx-auto flex flex-col">
          {greetingMessages?.map((content, index) => (
            <div key={index} className="my-10">
              <h1 className="text-xl font-bold"> {content.greatTitle} </h1>
              <p className="text-md my-5 text-justify font-medium">
                {' '}
                {content.productDescription}{' '}
              </p>
            </div>
          ))}
        </div>
        ...
</div>
  )
}

Here We Goooo!

Alright! Thanks for Reading!

Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me 🤙

Useful Resources for the Journey

To go further in your journey, here are the resources you need:

As a Developer

⚡ Did you know you can run a Business with Headless CMS?

⚡ Getting started with GraphCMS

⚡ What is Headless CMS

⚡ Building a super-fast and secure website with a CMS is no big deal.

⚡ What is Headless CMS

⚡ Youtube Videos on Headless CMS

⚡ Get Started with Gatsby JS and Headless CMS

As Business Owner or Company

⚡ What is Headless CMS

⚡ How To Model And Structure Content For A Headless CMS

⚡ Should you use WordPress or Headless CMS

Here is my Business Website:

👉 WebContract Business for Headless CMS

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

How I built the "Bio Links" Page using Tailwind CSS

CodeWithKenn — Fri, 28 Jan 2022 18:34:11 +0000

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

In this article, I'm about to show you how easy it is to build a "Bio Links" Page using HTML and Tailwind CSS in less than 5 minutes.

Feel free to follow me for more related articles. 🙏

Make sure you have checked my previous Tailwind CSS articles in this link to see another card design I've made.

Before starting:

I'm using TailwindCSS Playground to make things easier (Link below)
I've added the font in the CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;


* {
  font-family: 'Poppins', sans-serif;
}

I've used custom-color added in my Tailwind Config file:

module.exports = {
  theme: {
    extend: {
      // ...
      colors: {
        mirage: {
          DEFAULT: '#192734',
          50: '#769BBD',
          100: '#648EB5',
          200: '#4B749B',
          300: '#3A5B79',
          400: '#2A4156',
          500: '#192734',
          600: '#080D12',
          700: '#000000',
          800: '#000000',
          900: '#000000',
        },
      },
    },
  },
  plugins: [],
}

Let's goooooooooooooooo!

Design Concept

Our Page is made of Three parts:

User Profile
The Social Media Section
The Footer

Code Snippets


<div class="mx-5">
  <div class="">
    <!-- User Profile Picture -->
    <div class="max-w-sm h-auto mx-auto my-20 rounded-sm overflow-hidden shadow-lg bg-mirage-500">
      <img class="object-cover rounded-full h-24 w-24 mx-auto mt-8 p-1 border-4 border-yellow-500" src="https://avatars.githubusercontent.com/u/67477516?v=4" alt="Kenn Kibadi Picture" />
      <div class="px-6 py-4 text-white">
        <div class="flex flex-col">
          <div class="font-bold text-xl text-center hover:cursor-pointer">@KennKibadi</div>
          <p class="text-sm text-center">Software Engineer</p>
        </div>
      </div>

      <!-- Social Media Links -->
      <div class="flex flex-col mx-auto text-mirage-500">
        <a href="https://twitter.com/KennKibadi" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-twitter my-auto" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <h4 class="my-auto font-semibold mx-5">Twitter</h4>
        </a>
        <a href="https://www.youtube.com/channel/UCAYruOydWaqSRnJqKPzR4Ag" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
            <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
          </svg>
          <h4 class="my-auto font-semibold mx-5">Youtube</h4>
        </a>
        <a href="https://github.com/KennStack01" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
          </svg>
          <h4 class="my-auto font-semibold mx-5">Github</h4>
        </a>
        <a href="https://www.instagram.com/codewithkenn_/" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
            <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
          </svg>
          <h4 class="my-auto font-semibold mx-5">Instagram</h4>
        </a>
        <a href="https://www.facebook.com/Code-With-Kenn-104376625415201" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
          </svg>
          <h4 class="my-auto font-semibold mx-5">Facebook</h4>
        </a>
      </div>
      <!-- Footer -->
      <div class="text-white text-xs text-center mt-12 mb-4">Built by <a href="https://dev.to/codewithkenn" target="__blank" class="border-b-yellow-500 border-b-2"> CodeWithKenn</a></div>
    </div>
  </div>
</div>

Output

Tailwind CSS Playground Link

⚡ You can get the Source Code here 👉 Link to Tailwind Play

TailwindCSS Related Resources

⚡ TailwindCSS Official Docs

⚡ TailwindCSS Lab Youtube

Before you go!

Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

how I launched a Freelance Business using Headless CMS?

CodeWithKenn — Thu, 27 Jan 2022 07:16:02 +0000

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

In this article, I'm about to share with you how I launched a Freelance Business a year and a half ago, working remotely with my clients, after learning Jamstack Technologies (working with Headless CMS).

My Software Engineering Journey

I've been working with Web Development after discovering the Opportunities behind Web Technologies when I was in my Home Country (Republic Democratic of Congo), since 2018.

I Learnt HTML5, CSS3, and JavaScript. After working on some small projects, I got into React JS Library in 2019.

I came into the Jamstack industry (especially Headless CMS) at the end of the year 2020, after being challenged by the Job Industry; I couldn't get a job, but I need to have my skills tested and improved.

I started reading some articles and following Freelance Developers Podcasts, which lead me to decide to start my own business, without forgetting my main Goal is to be a Developer who helps and supports other Developers.

Since then, I've been working with Clients (Private Projects, and Public ones) and sharing that in Public on Linkedin and Twitter. That helped me to get a niche network of People interested in working with me.

Here I am to help you get started with Headless CMS and React Technologies (Ecosystem).

How to get started with Headless CMS Business

This section is divided into two parts: The Business Side and The Technical Part.

Business Side of things

Are you planning to start Freelancing?

Find a Niche, you'll never regret it, but that doesn't always work at the beginning.
For my case, I decided to help Small Businesses Owners to have an online presence by providing Services. You have to pick some special services and domains in which you'd like to help people.
Learn Negotiation, you'll get what you want: It's a skill to have to discuss even the pricing models.
I use Negotiation as a way to help my clients to feel free to speak and have a great space of opportunities I'm offering.
⭐ Give at least Two Pricings (The simple one and the Upgraded one).
Don't be afraid of fixing a high price, because you'll help a business to succeed and generate more profit. That's the Goal.

Technical Side of things

-** Learn ReactJS after learning JavaScript**: This will help you build a Websites Frontend efficiently.

You can start learning here:
⚡ Learn ReactJS From Crash

-** Learn GraphQL**: This will help you build Communicate between the Headless CMS and the Frontend you're gonna build.

You can start learning here:
⚡ Learn GraphQL From Crash

-** Learn GatsbyJS**: A ReactJS Framework, this will make your job easier because it comes with a lot of Resources and Plugins ready-to-work-with.

You can start learning here:
⚡ Learn Gatbsy JS From Crash

-** Learn UI and UX Design**: Learn how to design User Interfaces before Starting to code. This will simplify your Work and bring client satisfaction.

You can start learning here:
⚡ Learn UI/UX with Figma

-** Learn How to Choose the Right Headless CMS for Your Project**: Working with different clients on different projects, and each project has its own requirements, it becomes harder to pick and choose the best Headless CMS for your Project.

Sometimes, it's because of the complexity of the features a Headless CMS can provide, or the number of Headless CMS available on the market.

You can read this article for more:
⚡ What is the Right Headless CMS?

This is all you need to get started with the Business.

Things to never forget

Here are things to never forget to learn, improve, and sell to your potential clients:

SEO (Search Engine Optimization)
Websites Analytics (Services like Plausible can help, but choose whatever is suitable to you)
Converting a Gatsby Website to a Progressive Web App
Writing some Articles, Or Creating Blogs

Alright! Thanks for Reading!

Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me 🤙

Here is my Business Website:

👉 WebContract Business for Headless CMS

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

What is the Right Headless CMS?

CodeWithKenn — Thu, 27 Jan 2022 05:44:14 +0000

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

In this article, we're going to see how to choose the right Headless CMS.

If you're new to the Headless CMS industry, I wrote an article on the subject, you can get it here.

What you're about to read comes from my personal real-world Experiences, it's based on clarity on the issue of the article.

That being said, Let's discover together.

It's Difficult to choose

Working with different clients on different projects, and each project has its own requirements, it becomes harder to pick and choose the best Headless CMS for your Project.

Sometimes, it's because of the complexity of the features a Headless CMS can provide, or the number of Headless CMS available on the market.

Sometimes you have to ask yourself some of these types of questions:
What type of project my client needs? An E-commerce Website? A Marketing Website? A Simple Landing Page? Et cetera.

Thus, it's necessary to have a framework of criteria for Choosing a Headless CMS.

Some Criteria to know before choosing

Some of the Headless CMS out there

Before Choosing a Headless CMS, it's better to look at these important criteria.
Let's go! Talk is cheap!

Features

This is the first thing to verify because each Headless CMS has its specific strengths and weakness.
So, you have to choose the CMS having more of what you're looking for. It can be the Image handling part if you're creating or working with Images Galleries, Schedule publishing if you're working on Content Creating (Blogging), and so on.

This is why you have to spend time reading Different Headless CMS features, based on what your project requires.

Pricing

You're required to ask the right question about the financial part.
Is this project a Hobby or a real Business Project? Do I really want to invest money in this project? Am I going to need a team working? Etc

This gives some special guidelines on how to pick the Right CMS for you.

If You're working on a Hobby, It's better to choose the CMS having a Great Free Plan, this won't ask for any credit card.
If You're working on a Business Project, You can still go with the Headless CMS having a Free Plan for a couple of months in the Beginning.
If you're planning to work with a Team (Editor, Admin, Contributor for example), It's better to get started with an Upgraded Plan, because most of the Headless CMSs don't allow you to add more than two persons in the WorkSpace if you're using a Free Plan.

The User Interface

What makes a Headless CMS Great is the User Experience. AS a Developer, I can't be interacting with a BAD UI/UX Design, because it kills the Developer Experience.

It's not better, but best to choose the Headless CMS which covers the UI/UX requirements, such as Intuitive User Interfaces, Interface Color Management.

I've tried many Headless CMSs, and I never went back to some of them just because the User Interface was ugly and not intuitive.

Developer Relations Team

Not only the UI but also their Developer Relations Team is Great!

I remember working on a Client Project and approaching the deadline, I was going through a serious bug, and I couldn't solve it. It turns out it was an error from the Headless CMS Company, I've reached out to them and never got the answer.

So, I decided to try another Headless CMS (they have a Great Community), and redo all the Backend Structure. One of the Hardest Experiences of my Headless CMS Journey was that I had to suffer a lot before coming to that decision.

A Good Headless CMS must have an active online community (Slack for example) where People connect, help Customers (Developers).

Maybe You can hire me if you want, I've suffered a lot, and I can help you out with your Company. 😃

Community

One Word: Community! Not only a Community/Team of the Dev Rel, but also a Community of Customers, and Developers using your platform.
If you want to learn more, check ProductHunt Twitter Account.
They don't only share about their Product, they also support Developers naturally.

This brings followers and future potential Customers.

Other Criteria

I've given these criteria based on my personal experience;
if you want more on the subject,
Go Further by Checking some details on this *Website*

Oh! My preferences?

Stay tuned! I'm writing technical articles on this.
If you follow me, You'll discover some interesting articles on how to work with Nextjs, Gatsby, GraphQL, Tailwind CSS, and Headless CMS.

Please make sure to follow me for more. 🙏

Will you be interested in working with me?
Feel free to contact by the Website:

👉 WebContract.io

Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

Did you know you can run a Business with Headless CMS?

CodeWithKenn — Tue, 25 Jan 2022 09:41:37 +0000

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

In a nutshell, in this article, you're going to learn what a Headless CMS is, how to get started with it, and where you can find useful Resources for your Website Development Journey if you're a Developer or your Business Journey if you're a Business Owner.

Let's get started!

Before jumping into the Headless CMS concepts, let's view how the CMS world is made.

What is a Traditional Content Management System aka CMS?

A content management system (CMS) is an application that is used to manage content, allowing multiple contributors to create, edit and publish on the Internet.

You have a website, and You're behind the content which is being published, meaning you're the one who writes the content and publishes it so that your Website visitors can view/read/interact with it, or you have a team responsible for all the management process (Editors, Writers, Publishers, Contributors, and so on).

In other terms, A content management system (or CMS) is an application used for web development that allows content creators to produce, edit and publish text, or images, to a website.
(from https://medium.com/tribalscale/)

from https://www.velocityconsultancy.com/

What's the Problem behind Traditional CMS?

As you just saw, Traditional CMS seems to be pretty useful and well-suited for your Business, But as you grow in your Business, the company data and information will increase. By increasing the amount of data, we clearly see there will be some requirements for the Business to remain up and running efficiently.

And a Traditional CMS is not suited for this type of technicities. Unless you only want your business to stay small with a Simple Website, you cannot be happy and satisfied to see your information in the data not well handled, because the CMS can't handle it.

Apart from the Scalability problem, you'll have a problem with Flexibility. Using a Traditional CMS, you're stuck in a lack of flexibility and unable to bring as much customization as needed, because you're dependent on the platform.

It's time and money when you look for maintenance and enhancements, and this is not good neither for the Developer nor for the Business Owner.

What is a Headless CMS?

As we know, Traditional CMS doesn't have a front-end (the Designed User Interfaces); it can be used to store content but it doesn't visually display it.

But a headless content management system, or headless CMS, is a back-end-only content management system that acts primarily as a content repository.

(From Softweb Solutions)

Quick Video for You

%[https://www.youtube.com/watch?v=-Uor3I0n_vQ]

Why You need a Headless CMS

The truth of the matter is not only the fact that Headless CMS are very useful and powerful for Developers and Businesses, but also it's increasingly popular.

With more flexibility, low cost, richer web experience, easier to manage, with little pain.

As a Developer

For Software Developers, imagine creating a Content Architecture once for all and letting your Client or Manager manage, write, and publish the Content by himself, and You care ONLY about the User Interface.
With little effort, little pain, You save time and gain a lot of money.
And not only that, but You can also choose whatever Frontend technology you like.

You can use React, Vue, Angular, or Svelte + whatever Headless CMS you want 🤯

As a Business Owner

As a Business Owner, imagine having not to care of the User Interfaces Technologies, your team (Designer and Developer) take care of all the technical parts following your Design preferences, your Company's Logo Graphic Charter once for all.

You'll only have to go to the CMS type the Content you want and click on the "Publish" button.

That's not all! Did you know that Headless CMS is a lot cheaper for your Business Growth? It's like investing money for your Future Business Scalability.

Pay today, save the future. You got it right!

Using Headless CMS, you have more than 80% of chance of winning the Search Engine Optimization(SEO) Game.

Furthermore, if you're one of my followers, you'll discover other useful Headless CMS Business-driven articles, I will talk about the financial part of the Business.

Some of the Headless CMS

There are plenty of Headless CMS startups today, here are some of them.

How to get started with the Headless CMS industry?

You can get started now without much effort in learning how things happen.

As a Developer

If you're a Developer, You can get started by learning these technologies:

- Frontend: Reactjs (Gatsby or Nextjs) and a CSS Framework like Tailwind CSS to save your time.

- API Communication: Learn GraphQL to create and exchange data between the Headless CMS and the Frontend of your app.

- Headless CMS: learn how to create Content Architecture (how to create and structure your content in order to simplify your client's work), how to make it intuitive.

As a Business Owner

As a Business Owner, You can get started by:

- Hiring Some Industry Experts: You can hire a Headless CMS Developer, a Writer, and a Content Editor, to simplify your life, or you can simply hire the Developer and one Writer to make things simpler.

- Learning how to create content: by this, you will learn how to write the Content following the Marketing principles.

- Improving your Marketing and Content Creation Skills

That's all you need to know in order to get started as a Business Owner.

Useful Resources for the Journey

To go further in your journey, here are the resources you need:

As a Developer

⚡ What is Headless CMS

⚡ Building a super-fast and secure website with a CMS is no big deal.

⚡ What is Headless CMS

⚡ Youtube Videos on Headless CMS

⚡ Get Started with Gatsby JS and Headless CMS

As Business Owner or Company

⚡ What is Headless CMS

⚡ How To Model And Structure Content For A Headless CMS

⚡ Should you use WordPress or Headless CMS

Did you know that I've been running an Online Headless CMS Business for One year and a half?

Hey, there!

I've been running the Business, and It's kinda fun and very interesting to help Business to grow using Headless CMS.

Building Fast, Secure, and SEO-friendly Websites for Business Owners and Startups (working in Private and Public).

Will you be interested in working with me?
Feel free to contact by the Website:

👉 WebContract.io

Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

How I Built User Profile Interfaces using Tailwind CSS

CodeWithKenn — Thu, 20 Jan 2022 15:50:59 +0000

Hey, there!
This is Kenn again, Your Daily Advocate, and Friend from CodeWithKenn!

In this article, You'll learn and get the source code I promise 😅!
Discover an easier way to create simple user Social Media Profiles using Tailwind CSS.

Make sure you have checked my previous Tailwind CSS articles in this link to see another card design I've made.

Before starting:

I'm using TailwindCSS Playground to make things easier (Link below)
I've added the font in the CSS file

@tailwind base;
@tailwind components;
@tailwind utilities;


* {
  font-family: 'Poppins', sans-serif;
}

Let's goooooooooooooooo!

Design Concept

Our Card is made of three parts:

The Picture (Image)
The Description
The Footer made of Social media icons

And also, we're gonna combine all the cards in a Grid System.

CSS Grid is a two-dimensional grid system used to work on the layout of UI elements and segments of a webpage. The Grid comprises horizontal and vertical lines to form rows and columns, much like a table.

Code Snippets

Single Profile Tailwind Design

<div class="">
    <div class="max-w-sm h-auto mx-auto my-20 rounded-md overflow-hidden shadow-lg">
      <img class="object-cover rounded-full h-36 w-36 mx-auto m-1 p-1 border-4 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />

      <div class="px-6 py-4">
        <div class="flex flex-col">
          <div class="font-bold text-xl text-center text-gray-800 hover:text-pink-500 hover:cursor-pointer">Helena Wang</div>
          <p class="text-gray-600 text-sm text-center">Product Designer</p>
        </div>
        <div class="flex flex-row justify-center font-semibold mx-auto my-4">
          <div class="my-auto text-white bg-pink-500 hover:bg-pink-600 hover:cursor-pointer rounded-3xl py-2 px-4 mx-2">Follow</div>
          <div class="my-auto text-gray-800 py-1 px-4 border-2 border-pink-500 hover:bg-pink-500 hover:cursor-pointer hover:text-white rounded-3xl mx-2">Message</div>
        </div>
      </div>

      <div class="flex flex-row justify-center">
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709386/pexels-photo-2709386.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709385/pexels-photo-2709385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/3310692/pexels-photo-3310692.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
      </div>

      <div>
        <h4 class="text-sm text-center my-2 font-semibold text-gray-700">About me</h4>
        <p class="text-xs mx-6 text-justify">I specialize in designing and developing user interfaces and digital products. I don’t restrict myself to design.</p>
      </div>
      <div class="bg-pink-500 text-white mt-5 px-6 pt-4 pb-2 flex flex-row justify-center">
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
          </svg>
          <h5 class="my-auto text-sm">LinkedIn</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
      </div>
    </div>
  </div>

Output

Multiple Cards Tailwind Design

<div class="">
  <div class="">
    <div class="max-w-sm h-auto mx-auto my-20 rounded-md overflow-hidden shadow-lg">
      <img class="object-cover rounded-full h-36 w-36 mx-auto m-1 p-1 border-4 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />

      <div class="px-6 py-4">
        <div class="flex flex-col">
          <div class="font-bold text-xl text-center text-gray-800 hover:text-pink-500 hover:cursor-pointer">Helena Wang</div>
          <p class="text-gray-600 text-sm text-center">Product Designer</p>
        </div>
        <div class="flex flex-row justify-center font-semibold mx-auto my-4">
          <div class="my-auto text-white bg-pink-500 hover:bg-pink-600 hover:cursor-pointer rounded-3xl py-2 px-4 mx-2">Follow</div>
          <div class="my-auto text-gray-800 py-1 px-4 border-2 border-pink-500 hover:bg-pink-500 hover:cursor-pointer hover:text-white rounded-3xl mx-2">Message</div>
        </div>
      </div>

      <div class="flex flex-row justify-center">
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709386/pexels-photo-2709386.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709385/pexels-photo-2709385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/3310692/pexels-photo-3310692.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
      </div>

      <div>
        <h4 class="text-sm text-center my-2 font-semibold text-gray-700">About me</h4>
        <p class="text-xs mx-6 text-justify">I specialize in designing and developing user interfaces and digital products. I don’t restrict myself to design.</p>
      </div>
      <div class="bg-pink-500 text-white mt-5 px-6 pt-4 pb-2 flex flex-row justify-center">
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
          </svg>
          <h5 class="my-auto text-sm">LinkedIn</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
      </div>
    </div>
  </div>
  <div class="">
    <div class="max-w-sm h-auto mx-auto my-20 rounded-md overflow-hidden shadow-lg">
      <img class="object-cover rounded-full h-36 w-36 mx-auto m-1 p-1 border-4 border-pink-600" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Pexel" />

      <div class="px-6 py-4">
        <div class="flex flex-col">
          <div class="font-bold text-xl text-center text-gray-800 hover:text-pink-500 hover:cursor-pointer">Helena Wang</div>
          <p class="text-gray-600 text-sm text-center">Product Designer</p>
        </div>
        <div class="flex flex-row justify-center font-semibold mx-auto my-4">
          <div class="my-auto text-white bg-pink-500 hover:bg-pink-600 hover:cursor-pointer rounded-3xl py-2 px-4 mx-2">Follow</div>
          <div class="my-auto text-gray-800 py-1 px-4 border-2 border-pink-500 hover:bg-pink-500 hover:cursor-pointer hover:text-white rounded-3xl mx-2">Message</div>
        </div>
      </div>

      <div class="flex flex-row justify-center">
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709386/pexels-photo-2709386.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709385/pexels-photo-2709385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/3310692/pexels-photo-3310692.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
      </div>

      <div>
        <h4 class="text-sm text-center my-2 font-semibold text-gray-700">About me</h4>
        <p class="text-xs mx-6 text-justify">I specialize in designing and developing user interfaces and digital products. I don’t restrict myself to design.</p>
      </div>
      <div class="bg-pink-500 text-white mt-5 px-6 pt-4 pb-2 flex flex-row justify-center">
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
          </svg>
          <h5 class="my-auto text-sm">LinkedIn</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
      </div>
    </div>
  </div>
  <div class="">
    <div class="max-w-sm h-auto mx-auto my-20 rounded-md overflow-hidden shadow-lg">
      <img class="object-cover rounded-full h-36 w-36 mx-auto m-1 p-1 border-4 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />

      <div class="px-6 py-4">
        <div class="flex flex-col">
          <div class="font-bold text-xl text-center text-gray-800 hover:text-pink-500 hover:cursor-pointer">Helena Wang</div>
          <p class="text-gray-600 text-sm text-center">Product Designer</p>
        </div>
        <div class="flex flex-row justify-center font-semibold mx-auto my-4">
          <div class="my-auto text-white bg-pink-500 hover:bg-pink-600 hover:cursor-pointer rounded-3xl py-2 px-4 mx-2">Follow</div>
          <div class="my-auto text-gray-800 py-1 px-4 border-2 border-pink-500 hover:bg-pink-500 hover:cursor-pointer hover:text-white rounded-3xl mx-2">Message</div>
        </div>
      </div>

      <div class="flex flex-row justify-center">
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709386/pexels-photo-2709386.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709385/pexels-photo-2709385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/3310692/pexels-photo-3310692.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
      </div>

      <div>
        <h4 class="text-sm text-center my-2 font-semibold text-gray-700">About me</h4>
        <p class="text-xs mx-6 text-justify">I specialize in designing and developing user interfaces and digital products. I don’t restrict myself to design.</p>
      </div>
      <div class="bg-pink-500 text-white mt-5 px-6 pt-4 pb-2 flex flex-row justify-center">
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
          </svg>
          <h5 class="my-auto text-sm">LinkedIn</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
      </div>
    </div>
  </div>
  <div class="">
    <div class="max-w-sm h-auto mx-auto my-20 rounded-md overflow-hidden shadow-lg">
      <img class="object-cover rounded-full h-36 w-36 mx-auto m-1 p-1 border-4 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />

      <div class="px-6 py-4">
        <div class="flex flex-col">
          <div class="font-bold text-xl text-center text-gray-800 hover:text-pink-500 hover:cursor-pointer">Helena Wang</div>
          <p class="text-gray-600 text-sm text-center">Product Designer</p>
        </div>
        <div class="flex flex-row justify-center font-semibold mx-auto my-4">
          <div class="my-auto text-white bg-pink-500 hover:bg-pink-600 hover:cursor-pointer rounded-3xl py-2 px-4 mx-2">Follow</div>
          <div class="my-auto text-gray-800 py-1 px-4 border-2 border-pink-500 hover:bg-pink-500 hover:cursor-pointer hover:text-white rounded-3xl mx-2">Message</div>
        </div>
      </div>

      <div class="flex flex-row justify-center">
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709388/pexels-photo-2709388.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709386/pexels-photo-2709386.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/2709385/pexels-photo-2709385.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
        <img class="object-cover hover:cursor-pointer rounded-full h-12 w-12 m-3 p-0.5 border-2 border-pink-600" src="https://images.pexels.com/photos/3310692/pexels-photo-3310692.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Human Picture by Ike louie Natividad" />
      </div>

      <div>
        <h4 class="text-sm text-center my-2 font-semibold text-gray-700">About me</h4>
        <p class="text-xs mx-6 text-justify">I specialize in designing and developing user interfaces and digital products. I don’t restrict myself to design.</p>
      </div>
      <div class="bg-pink-500 text-white mt-5 px-6 pt-4 pb-2 flex flex-row justify-center">
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
          </svg>
          <h5 class="my-auto text-sm">LinkedIn</h5>
        </div>
        <div class="flex flex-row mx-1 hover:cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-2" width="32" height="32" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <h5 class="my-auto text-sm">Facebook</h5>
        </div>
      </div>
    </div>
  </div>
</div>

Output

Multiple Cards Tailwind Design using Grid System

Very Simple! Just add the grid grid-cols-2 class in the first div.

<div class="grid grid-cols-2">
...
</div>

Tailwind Output

Tailwind CSS Playground Link

⚡ You can get the Source Code here 👉 Link to Tailwind Play

TailwindCSS Related Resources

⚡ TailwindCSS Official Docs

⚡ TailwindCSS Lab Youtube

Stay tuned! More articles are coming out! Feel free to follow me, comment and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

How to Build Blog Articles Cards using Tailwind CSS

CodeWithKenn — Thu, 20 Jan 2022 11:43:48 +0000

Hey, there!
This is Kenn, Your Daily Advocate, and Friend from CodeWithKenn!

In this article, You'll discover an easier way of creating cards (image + text description) using Tailwind CSS.

Be Cautious:

I'm using TailwindCSS Playground to make things easier (Link below)
I've added the font in the CSS file

@tailwind base;
@tailwind components;
@tailwind utilities;


* {
  font-family: 'Poppins', sans-serif;
}

Let's started!

Design Concept

Our Card is made of two parts:

The Picture (Image)
The Description

And also, we're gonna combine all the cards in a Grid System.

Code Snippets

Single Card Tailwind Design

<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
  <img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
    <p class="text-gray-700 text-base">
      The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
  </div>
</div>

Output

Multiple Cards Tailwind Design

<div class="">
  <div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
  <img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
    <p class="text-gray-700 text-base">
      The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
  </div>
</div>

<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
  <img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
    <p class="text-gray-700 text-base">
      The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
  </div>
</div>
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
  <img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
    <p class="text-gray-700 text-base">
      The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
  </div>
</div>
<div class="max-w-sm h-auto mx-auto my-20 rounded overflow-hidden shadow-lg">
  <img class="object-cover h-48 w-96" src="https://images.pexels.com/photos/4220967/pexels-photo-4220967.jpeg" alt="Volcano">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 hover:text-red-500 hover:cursor-pointer">Visit Kivu Volcano</div>
    <p class="text-gray-700 text-base">
      The picturesque lake, nestled between the DRC and Rwanda, has the potential to explosively release these gases in a rare phenomenon known as a limnic eruption.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-100 hover:bg-gray-200 hover:cursor-pointer rounded-md px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#congo</span>
  </div>
</div>
</div>

Output

Multiple Cards Tailwind Design using Grid System

Very Simple! Just add the grid grid-cols-2 class in the first div.

<div class="grid grid-cols-2"> ... </div>

Tailwind Output

Tailwind CSS Playground Link

⚡ You can get the full Code here 👉 Link to Tailwind Play

TailwindCSS Related Resources

⚡ TailwindCSS Cards from the Docs

⚡ TailwindCSS Official Docs

⚡ TailwindCSS Lab Youtube

Stay tuned! More articles are coming out! Feel free to comment and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

Discover Amazing Python Resources FOR FREE!

CodeWithKenn — Thu, 20 Jan 2022 10:13:24 +0000

What if I told you You can learn Python in ONLY three weeks?

Will you trust me? haha 😅

Hey, there!
This is Kenn, Your Daily Advocate, and Friend from CodeWithKenn!

In this Article, You gonna get one of the easiest Python Learning Roadmap and Resources for Free. Make sure to follow up for more articles coming. That's it! Let's get down to Business!

Don't worry, You won't get bored with CodeWithKenn! Easy, Free, Short, but Use articles for Your Journey. Let's Gooooooo!

Brief Description of Python

If you just come from my article on Learning Python in 2022! (Business Perspective), You've already known much on the subject.

In a nutshell, Python is one of the easiest programming languages to get started with. For this reason, the community keeps growing every month, with a market value of over $10 Billion.

So, why not get the Resources you really need for the Journey???

Get what You really need

As they are plenty of them, here are the two main resources you can use as references to go and check according to what you need:

Refresh the memory with the Fundamentals

Without the fundamentals, there is no way to bring innovation, meaning there is a necessity of getting a foundation. Here are the main resources:

Python for Web Development

Here you have all You need for your Backend Journey. Don't overthink, use this and start building stuff:

Interested in Flask App Development?

Videos Resources

⚡ Corey Schafer Beginners Flask Videos Series

⚡ Build a CRUD APP with Python Engineer

Community Resources

Coding, but Stuck with some bugs? Here is the Solution, Go and ask the Community:

⚡ Flask Subreddit Community

⚡ Python Subreddit Community

Docs Resources

⚡ Awesome Flask Links

⚡ Flask for your Project

⚡ Flask Latest Docs

Django App Development

Videos Resources

⚡ Corey Schafer Beginners Django Videos Series

⚡ FreeCodeCamp Djajngo for Beginners

Community Resources

Coding, but Stuck with some bugs? Here is the Solution, Go and ask the Community:

⚡ Django Subreddit Community

⚡ Django Community

Docs Resources

⚡ Django Official Docs

⚡ Django ReadTheDocs.io

🔥 This article is being updated, I'm adding Fast API Resources and AI/ML Resources on the Blog! Stay tuned!

Stay tuned! More articles are coming out! Feel free to comment and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!

YOU NEED to Learn Python in 2022! (Business Perspective)

CodeWithKenn — Thu, 20 Jan 2022 07:14:13 +0000

Python is one of the easiest programming languages to get started with. For this reason, the community keeps growing every month.

Because of its simplicity (of the Syntax), Python has become the most popular language.

Besides, Python helps Engineers build great products in many industries and professional domains.
The Programmer's life gets easier when it comes to having a look at Python.

What about the Python Business Market size?

Python is an open-source language, which means that anyone can use it. However, if you look to an industry such as data analytics, in which Python can be used, the market value is over $10 billion.

Shared by futurelearn.com

Here are the top 10 most common uses of Python by industry

▪ Insurance: Creating business insights with machine learning.

▪ Retail Banking: Flexible data transformation and manipulation.

▪ Aerospace: Meeting software system deadlines.

▪ Finance: Data mining to identify cross-sell opportunities.

▪ Business Services: API access to financial information

▪ Hardware: Automating network administration

▪ Healthcare: Predicting disease prognosis

▪ Consulting Services: Bespoke web development

▪ InfoTech: IT modernization

▪ Software: Adding extensibility to legacy applications

Shared by appdevelopermagazine.com

Here are 5 World-Class Software Companies That Use Python

(Photo by Visual Capitalist)

Google, Meta (Facebook), Instagram, Netflix, Instagram.
There are plenty of companies searching for Python Developers around the globe.

Hence, I created this Blog to help you out!

Hence, Learning Python helps you create Opportunities from jobs to Building Products people use.
I just got into Full-stack development using Python Software Development, React + Python as Tech Stack.

Make sure to follow CodeWithKenn for more articles about:

➞ Learning Python in simple terms

➞ Building Side Projects and SaaS using React + Python

➞ Getting useful Resources and tips for your coding Journey

Stay tuned! More articles are coming out! Feel free to comment and share the articles to support me 🤙

🌎 Let's connect

Want to start blogging? 🔥Join NOW!