Actionable Measurable
Notetaking

Flotes is a free note taking app enhanced with flashcard features.
Study, track progress, and leverage spaced repetition to
maximize retention and efficiency.

Get Started Try the Demo

Data Structures Lists

Data Structures LRU

Data Structures Graphs

Algorithms II

CS 450 Lecture Notes

Data Structures Intro

Leet Code II

Data Structures Intro

Notebook Progress

Complete

Completion

(4 / 4)

Notes Archived

(5 / 12)

Notes Studied

39 Notes

+8 notes this study session

Time Studied

5:10M

+58 seconds this study session

Total Notes/Time Studied

220 Notes

2:03H

Notebooks Overview

7 Active Notebooks

Complete

-----

In Progress

-----

Not Started

-----

28%

Complete

Total Notebooks Completed

10 Notebooks

Performance

Session Accuracy

7 Blanks Answered

71%

Accuracy

Correct

-----

Incorrect

-----

Session

Easy

Session

Medium

Session

Hard

-1

Writing Notes

Markdown Editor & Portability

Markdown Pro? Flotes can be used as a standalone note taking app or in-conjunction with any Markdown app you currently use.

New to Markdown? Flotes provides a toolbar & hotkeys to insert Markdown formatting for you. Similar to Notion, typing a / displays a list of pre-configured templates and components.

Markdown

Supports formatting, images, videos, tables, code blocks, flow charts, fill in the blanks, info blocks, and badges all through valid portable Markdown

Portability

Import from any Markdown app such as Obsidian, InkDrop, SimpleNote. No proprietary format or data lock-in. Export your notes at any time, to anywhere.

Tailwind
Tailwind Grid

# Tailwind Grid

### Grid Classes

Tailwind grid classes correlate to **css grid properties**. Match the *resulting css* to it's *tailwind class*.

`grid-auto-flow: column`

__grid-flow-col__

`grid-auto-columns: max-content`

__auto-cols-max__

### Example

```html

<div class="grid grid-flow-col auto-cols-max">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

```

Preview

Tailwind Grid

Grid Classes

Tailwind grid classes correlate to css grid properties. Match the resulting css to it's tailwind class.

grid-auto-flow: column

grid-auto-columns: max-content

Example

<div class="grid grid-flow-col auto-cols-max">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Why Flotes

Get More Out of Studying

Retention

Flotes is structured to emphasize long term retention and efficiency. Remember what you learn. No illusion of confidence.

Efficient

Builds statistics from your self-evaluation. Figure out what works and what doesn't. Archive what you know, practice what matters.

Effective

Create notes that are challenging and engaging. Built-in spacing algorithm helps you practice optimally, without getting overwhelmed.

Tailwind
Tailwind Grid

Tailwind Grid

Grid Classes

Tailwind grid classes correlate to css grid properties. Match the tailwind class to the resulting css.

grid-auto-flow: column

grid-auto-columns: max-content

Example

<div class="grid grid-flow-col auto-cols-max">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>